1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
text-align:center作用在行内元素上能让作用这行里的文本和图片水平居中。
2.IE 盒模型和W3C盒模型有什么区别?
- IE盒模型的width和height的值等于相对应的content值+padding值2+border值2;
- W3C盒模型的width和height的值就等于content值；
![1GU]134XM$6N8(GVJC{B01G.png](https://img.haomeiwen.com/i4761706/4feda40be2e1bb31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3.*{ box-sizing: border-box;}的作用是什么？
作用为使用IE盒模型来计算相应的元素的宽和高。
4.line-height: 2和line-height: 200%有什么区别?
- line-height: 2表示行高为本身字体高度的两倍；
- line-height: 200%表示设置行高为父元素字体高度的200%高度。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
1.inline-block 既呈现 Inline 特性（不占据一整行，宽度由内容宽度决定）又呈现block特性（可设置宽度高，内外边距）。
- 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。
- 使用font-size:0。
更多方法
3.设置 vertical-align: top;
6.CSS sprite 是什么?
CSS sprite叫做CSS精灵图，让多个的图片放在一个大的图片上，目的是减少向服务器的请求数量，提高加载速度。
7.让一个元素"看不见"有几种方式？有什么区别?
| 方式 | 区别 |
|---|---|
| opacity:0 | 透明度为0，但还占据相应的位置 |
| visibility: hidden | 即使不可见的元素也会占据页面上的空间 |
| display:none | 让元素消失，不占据位置 |
| background-color:rgba(0,0,0,0.1) | 通过背景色和透明度来让元素"看不到" |
代码
- 在iconfont上搜索"饥人谷"55， 使用字体图标实现代码1中的效果
注意：由于 jsbin 不支持上传文件，所以你 不应该 在 jsbin 上使用本地链接来制作 iconfont！你应该使用 阿里的 CDN 链接！！！
网友评论