CSS基础样式&盒模型

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

IE盒模型中，给元素设置的宽高包括其padding和border值，而在W3C标准盒模型中，为元素设置的宽高是不包括padding和border的；

两种盒模型有各自的应用场景，为此CSS3新增了属性boder-box来设置盒模型种类，具体格式为`box-sizing：border-box | content-box；`  ，其中border-box表示IE盒模型，content-box表示标准盒模型，Chrome在不设置的情况下默认为标准盒模型。

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

line-height: 2 表示字体行高为当前文字大小的2倍；

line-height: 200% 表示字体行高为其父元素中字体高度大小的2倍。

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

先分别说说行内元素和块级元素特性：

a. 行内元素特性——不占据一整行，宽高由自身内容撑开，设置宽高无效，设置上下padding、margin无效，虽能撑开边框和背景，在文档流中占据的高度不变，撑开部分会覆盖上下相邻元素；

b. 块级元素特性——占据一整行位置，超出部分自动换行，可设置宽高，可设置margin、padding等；

inline-block元素既具有行内元素特性，又具有块级元素特性，占据自身宽度，可设置宽高，设置margin、padding等。

inline-block元素去缝隙：html元素在书写过程中相邻元素之间会存在换行，浏览器会解析成一个空格，这样相邻inline-block元素之间就存在一个占据一定宽度的空格元素；解决方法：将inline-block元素父元素font-size设置成0，这样空格就完全不占据空间，再将每个inline-block元素font-size设置回来，覆盖font-size：0；即可实现去缝隙。

高度不一样的inline-block元素，浏览器默认按照字体元素基线对其，可通过vertical-align:top;去设置inline-block元素的顶端对齐。

5、CSS sprite （雪碧图/精灵图）是什么? 

css sprite(雪碧图/精灵图)是指通过css将多张图片拼在一起组成一张图片，这样可以减少网络请求，节约网络资源。

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

主要以下几种方式：

（1）display:none;  元素消失，不显示在当前页面下，并且不占据文档流空间；

（2）visibility:hidden;  将元素设置为隐藏，元素看不见，但占据文档流空间；

（3）opacity:0;  可视度为0，元素看不见，但是占据位置，和visibility:hidden;相似。

7、简述字体图标的原理

字体图标原理与文字渲染原理类似，每个字体图标在字体图标库中绘制好并且编上对应的编码，这样字体图标库就相当于一种自定义文字，当在css中引入该字体文件库后，在html中使用对应语句引入对应字体图标即可。