CSS常见样式2

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)	通过背景色和透明度来让元素"看不到"

代码

1. 使用 CSSsrpite 实现如下效果【效果范例82】. ps: 图片下载地址55

作业1

2. 在iconfont上搜索"饥人谷"55， 使用字体图标实现代码1中的效果

注意：由于 jsbin 不支持上传文件，所以你 不应该 在 jsbin 上使用本地链接来制作 iconfont！你应该使用 阿里的 CDN 链接！！！

作业2