CSS的常见样式（下）

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

作用：是让块级元素的内的行内元素或者文字居中，作用在块级元素上，能让块级元素内的行内元素和文字水平居中；

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

• IE盒模型：width（宽度）=content尺寸+padding+border
• W3C盒模型：width（宽度）=content(内容宽度）
• ie6 7 8 怪异模式（不添加doctype）使用ie盒模型，宽度=边框+padding+内容宽度
• chrome ie9+ ie6 7 8(添加doctype)使用W3C盒模型，width(宽度）=内容宽度

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

• 使用css3新样式box-sizing:
  1.box-sizing：content-box W3C盒模型
  2.box-sizing:border-box IE盒模型
• 盒子模型基准尺寸有两种，一种是content-box，这是对于W3C盒模型尺寸的，一种是border-box，这是对于IE盒模型尺寸的计算；

• content-box和border-box二者的区别其实就是是否有包含表边框（border）和内边距（padding）

  
  9a7e8b3b280c5d570d60cc6bca5a450.png
  9f6bdd9e61f7ec2ba0a6cd629d5e799.png
  

  从检查元素就能看出二者的区别了：首先当设置box-sizing:border-box时，我设置的盒模型宽度为200px，但是在检查元素中却只能看到宽度为178px了，因为里面包含了padding和border；然后当设置box-sizing:content-box时，我设置的盒模型宽度为200px，检查元素中，也能看到宽度为200px。

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

• lini-height: 2 ;继承的是页面上每个元素它本身高度的2倍

• line-height: 200%;继承的是父元素文字高度的2倍

  
  3b4c92489b832988616f27816771e1e.png

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

• inline-block：既具有inline的属性（不占据一整行，宽度有内容宽段决定），又具有block的属性（可设置宽高，内外边距）
• 如何去除缝隙：1.在CSS中用div包裹住元素，然后在父元素中设置font-size为零，再把子元素中font-size的值设置出来；
  2.在html中，设置元素不要转行或者留着任何空格即可；
• 如何对齐：vertical:top(顶端对齐）、bottom(底部对齐）。

6.CSS sprite 是什么?

• CSS精灵图 使用精灵图只需要引用一张图片，通过位移就可以获得所需的图片；
• 优点：请求比较少，网速较快，占更小的内存，用更少的流量；
• 缺点：无法缩放，不好修改；

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

• opacity:o; 整体透明度为0；
• visibility:hidden; 与opacity:0;类似；元素看不见，透明，但是本身还是存在，浏览器知道存在，有位置的。
• background-color:ragb(0,0 ,0 ,0.2)设置背景为透明颜色；
• display:none;是指让元素消失，对浏览器而言，元素是不存在的。

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

• 作业

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

• 作业