css常见样式2

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

对一个块级元素设置``text-align: center`后，会让块级元素内的行内元素水平居中。

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

• 对W3C盒模型定义宽高时，定义的是content的宽高。
• 对IE盒模型定义宽高时，定义的是border的宽高（包括content和padding）。

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

元素的盒模型使用IE盒模型标准。

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

• line-height: 2行高按照自身字号的2倍来设置，继承给子元素时按照子元素的字号的2倍赋予给子元素
• line-height: 200%行高按照父元素的200%来设置，继承给子元素时按照父元素的字号的2倍赋予给子元素

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

inline-block的特性：既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)又呈现block 特性 (可设置宽高，内外边距)，但是会有缝隙问题（inline元素中间有空白符），解决方法为删除代码间的空白（即结束标签后面接着另一个标签而不是另起一行）。
使用vertical-align: top来实现inline-block元素的顶端对齐。

6. CSS sprite 是什么?

CSS精灵图，是将不同的图标/图片拼接到一张图片上的一种处理方式，这样做可以减少网页的网络请求，来提高网页加载性能；缺点是不适合缩放，不好修改。

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

1. opacity: 0 ; 透明度为零 ，占据空间，可点击
2. visibility: hidden ; 可见度为0，占据空间，可点击
3. display:none; 消失，不占用空间，不可点击
   4 .height:0，overflow:hidden；高度设置为0，溢出部分隐藏，不占用空间，不可点击
4. position属性，将元素定位到视窗看不见的地方，可达到看不见的效果

代码

logo
字体图标