text-align: center
text-align:center作用在块级元素上，能使块级元素内的文本，图片等行内元素水平居中，但不能使子类块级元素居中。
同时text-align具有可继承的特性，子类块级元素的子类内联元素也会居中。
IE 盒模型和W3C盒模型
IE盒模型box-sizing: border-box：width或height=内容宽度或高度+padding*2+border*2
W3C盒模型box-sizing: content-box： width和height=内容的宽度或高度
- 在IE678中，没有添加doctype的情况下会使用ie盒模型。
- 在IE678中添加doctype，IE9及以上版本和chrome会使用W3c标准盒模型。
- 可以根据实际需要利用
box-sizing: content-box/ border-box进行设置。
*{ box-sizing: border-box;}的作用：
把页面上所有的盒模型设置为IE盒模型这个概念，以利用IE盒模型的属性：
width或height=内容宽度或高度+padding*2+border*2
line-height属性：
行间距，即传说中控制两行文字垂直距离的东东。在CSS中，line-height被用来控制行与行之间垂直距离。
不过，行间距与半行间距，还是取决于CSS中的line-height。那么，如何来使用line-height呢？
默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值：p｛line-height:140%｝
你可以有5种方式来定义line-height：
- line-height可以被定义为：
body{line-height:normal;} - line-height可以被定义为：
body{line-height:inherit;} - line-height可以使用一个百分比的值：
body{line-height:120%;} - line-height可以被定义为一个长度值(px,em等)：
body{line-height:25px;} - line-height也可以被定义为纯数字：
body{line-height:1.2}
缩写line-height
那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>
实例：body{font:100%/normal arial;} , body{font:100%/120% arial;} ,body{font:100%/1.2 arial;} ,body{font:100%/25px arial;}
line-height不同定义方式的计算
-
百分比
-
长度
-
normal
-
纯数字
inline-block
- 特性：
- 和其他元素都在一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- ** 如何去掉中间的缝隙：**
可以改变元素的书写方式，让两个标签前后相接没有空格，但这种写法不符合代码规范，增加了阅读和后期维护成本，不建议使用。
也可以使用margin负值，或者使用letter-spacing、word-spacing等。
比较推荐的是用font-size:0来进行解决，如下：
- ** 高度不一样的inline-block元素如何顶端对齐？**
设置vertical-align的值来实现顶端对齐：vertical-align:top
CSS sprite介绍
CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位。
其优点在于：
- 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
- 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
- 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
- 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
诚然CSS Sprites是如此的强大，但是也存在不可忽视的缺点：
不易修改，不能缩放等。
让一个元素"看不见"的方式及区别：
- display:none
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。 - visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。 - opacity:0
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。 - background-color: rgba(0，0，0，0.2) ； 只是背景色透明。
