Web9. CSS常见属性2

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

text-align用在块级元素上，对里面的行内元素生效

text-align：center 会使得行内元素居中

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

区别：W3C标准中的padding  border 所占的空间不在width height范围内

            大家俗称的IE盒模型width包括content尺寸+padding+border

ie678怪异模式（不加doctype）使用ie盒模型 

宽度=边框+padding+内容宽度

chrome  ie9   ie678（添加doctype）使用标准盒模型

宽度=内容宽度

3.*｛box-sizing：border-box；｝的作用是什么

box-sizing是CSS3的新样式

box-sizing： content-box  w3c标准盒模型 不用管边框和内容是多少

box-sizing： border-box   IE盒模型  不用管边框和内容是多少

                                              为元素设定的宽度和高度决定了元素的边框盒

                                              为元素指定的任何内边距和边框都将在已经设定的宽度

                                               和高度内进行绘制。通过从已经设定的宽度和高度分别减去

                                              边框和内边距才能得到内容的宽度和高度

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

height = line-height 来垂直居中单行文本

line-height    单行文本的行高

2和200%的区别：

2表示占据的行高是本身文字行高的2倍

200%表示行高是父容器文字高度的2倍

line-height:2   在继承关系中页面所有元素都会以自身文字高度2倍进行继承

line-height:200% 在继承关系中会先计算具体的行高，页面元素继承计算后得到的行高

5.inline-block

既呈现inline特性（不占据一整行，宽度由内容宽度决定）

又呈现block特性（可设置宽高，内外边距）

缝隙问题

vertical-align:bottom底部对齐

vertical-align:top顶部对齐

6.CSS Sprite

CSS精灵 指的是将不同的图片/图标合并在一张图上

使用CSS Sprite可以减少网络请求 提高网页加载性能

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

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

visibility: hidden; 和opacity：0类似

display: none;消失，不占用位置

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

补充