饥人谷任务班TASK9

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

使块级元素内容水平居中；也可以使行内元素水平居中。

IE 盒模型和W3C盒模型有什么区别?

111.jpg

• IE盒模型-范围含有 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。（ie6,7,8）浏览器中如果不加dctype html声明则浏览器会默认使用IE盒模型。
• W3C标准盒模型-范围含有 margin、border、padding、content，并且 content 部分不包含其他部分。

*{ box-sizing: border-box;}的作用是什么？

• box-sizing:border-box; 是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起，通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）
  如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）。
  使得排版更加方便计算。

line-height: 2和line-height: 200%有什么区别?

• 不加单位的line-height是相对于各个元素本身的文字大小，这里设置为2是设置各个元素的line-height的两倍。
• 加单位的line-height是相对于父容器的文字大小。

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• 既呈现inline属性（不占据一整行，宽度由内容决定）；又呈现block属性（可设置宽高，内外边距）。
• 去除缝隙:可以删除inline-block元素HTML代码之间空隙。也可以在外层加一个父容器(例如:div)，然后设置这个父容器的font-size:0即可。(注意要在inline-block元素中重新定义字体大小)
• 高度不一样，可以设置vertical-align: top；某些情况下可以直接用浮动。(注意清浮动)

CSS sprite 是什么?

CSS精灵图(俗称雪碧图)。是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

其优点在于：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
• 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：

• 图片合成比较麻烦；
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片；
• 无法缩放。

让一个元素"看不见"有几种方式？有什么区别?

• display:none 元素不可见，也不占用页面上的空间。
• visibility:hidden 即使不可见的元素也会占据页面上的空间。
• opacity:0; 设置元素的透明度为0，而且会占用页面空间。(为了兼容IE也会在后面加上filter:alpha(opacity=0))
• background:rgba(0,0,0,0) 设置背景色为透明。(仅对无内容的元素)
• height:0;overflow:hidden 直接设置高度为零，简单粗暴。