今天完成的事情：终于学会了bootstrap自定义样式

明天计划的事情：在bootstrap的基础上搭建任务6

遇到的问题：bootstrap如何自定义样式？

收获：

1、div与span区别和应用场景

以下是在没有对开发网页页面设置css样式时候情况下，系统默认情况下的介绍：

div与span区别

div占用的位置是一行

span占用的是内容有多宽就占用多宽的空间距离

2、CSS Sprites雪碧图生成工具

step1 打开软件，浏览界面，整个界面比较简洁，各功能区一目了然，我们需要做的是点击左上角的“选择多幅小背景图片”

step2 勾选所需要整合的小图后，载入，可选择“小图竖排”或“小图横排”进行排序，也可手动挪动图标进行布局。

step3 填写中间部分的选项。css中文件夹路径是大图将要存放的位置，相对于css样式表的路径，请按照实际情况进行填写；图片名称自定义。

step4 可以生成sass代码，以及css代码，看自己需要，自己选择，设计手机端界面，需要选中“是否是手机端”，这时会把所有的尺寸除以2，因为手机端往往会设计图比较大，所以要缩放，建议生成图片后再复制生成的代码,代码内容包括：

background: url("../img/css6/sprite.png");

background-repeat: no-repeat;

background-size: 91px 47px;

height:47px;

width:47px;

background-position: -44px 0;

step5 点击“生成雪碧图”就可以保存大图了

CSS Sprites好处很明显，在页面性能优化上特别出众，使用这个工具更可以准确的获取每个小图的background-position值，是一个前端布局必备的好工具。

3、什么情况下用img，不使用sprite

雪碧图只适用于background背景图片，eg：用于设置按钮的背景图片

4、负外边距的作用效果

marin-left或者margin-top是负值：它会将元素在相应的方向进行移动。left就是左右方向移动，top就是上下方向移动。也就是会使元素在文档流里的位置发生变化。

margin-right或者margin-bottom是负值：它不会移动该元素(该元素不变化)，但会使该元素后面的元素往前移动。也就是说，如果margin-bottom为负值，那么该元素下面的元素会网上移动；如果margin-right为负值，那么该元素右边的元素会往左移动，从而覆盖该元素。 

5、设置文字被截断出现”…”省略号

text-overflow 属性规定当文本溢出包含元素时发生的事情。

一般与其他几个属性配合使用，

white-space:nowrap;  规定段落中的文本不进行换行：

width:12em;                固定宽度

overflow:hidden;         溢出部分隐藏

text-overflow:ellipsis   文字被截断出现”…”