CSS基础样式&盒模型&字体图标

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

IE盒模型的width包括content+padding+border；

w3c盒模型的width只包括content

2.CSS 的属性box-sizing有什么值？分别有什么作用?

box-sizing，有两个值，一个是content-box,表示w3c盒模型;一个是border-box，表示IE盒模型

3.ine-height：2和line-height:200%有什么区别?

区别在于两种不同的属性后，其子元素表现样式上的区别。

line-height：2，父元素设置这个属性后，其子元素的行高都是自身字体大小的2倍。

line-height:200%,父元素设置这个属性后，其子元素的行高都是父元素字体大小的二倍。

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

inline-block既呈显出inline的特性（不占据一整行，宽度由内容宽度决定），又呈现出block特性（可设置宽高，内外边距）

去除缝隙：1.设置父元素字体font-size=0；然后在inline-block元素中再重新设置font-size字体

2.html连写

如何顶端对齐：通过设置vertical-align：top可以实现顶端对齐

5.CSS sprite （雪碧图/精灵图）是什么? 动手实现写一个使用图片sprite实现 icon 的Demo

指将不同的图片/图标合并在一张图上，使用CSS sprite可以减少网络请求，提高网页加载性能。

demo

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

有四种。

opacity：0；透明度为0，整体

visibility:hidden;和opacity：0类似

display：none;消失，不占位置

background-color：rgba(0,0,0,0.2)只是背景色透明

7.简述字体图标的原理，动手实现使用 iconfont 实现字体图标的 demo，回复预览地址

字体图标的原理：使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。

预览地址