CSS 常见样式 2
text-align
text-align CSS 属性定义行内内容，如何相对它的块元素对齐。并不控制快元素自己的对齐，只控制它的行内内容的对齐。
text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。
IE盒模型和 W3C 盒模型
W3C的是 element = content + padding + border + margin;
通过盒模型的外边距 margin 拉开各元素之间的间隙、距离，使用 padding 来撑开自身的宽高
IE是是 element = content + margin。
在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页， ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
*{box-sizing: border-box}
使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。支持IE8+。
当设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
line-height
数字：这个无单位数字乘以该元素的字体大小。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。建议使用数字写法。
百分比：与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。
继承：
如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值。
而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。
一般来数，设置行高的值为 纯数字 是最推荐的方式，因为其会随着对应的 font-size 而缩放。
inline-block
设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
默认情况下，inline元素之间就有间隙出现，inline-block 也有这个特点。
去除间隙：
给父元素设置 font-size:0；使用margin负值；无闭合标签；使用letter-spacing；使用word-spacing。
inline-block的默认对齐方式是vertical-block：baseline，就是inline-block元素要根据父元素的基线对齐。
给inline-block元素加上 vertical-align:top; vertical-align指定的对齐顶部、底部或中间，是相对于当前行而不是父元素。
CSS Sprite
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
元素看不见
display:none; 将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有。
visibility:hidden; 元素在页面消失后，其占据的空间依旧会保留着，只是肉眼看不到而已。
适用于那些元素隐藏后不希望页面布局会发生变化的场景。
opacity:0; 表示元素的透明度，将元素的透明度设置为0后，页面上将看不到。像穿了隐身衣一样，隐藏后依旧占据着空间。
元素的margin，border，padding，height 和 width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，设置为 overflow:hidden 来隐藏其子元素。
display:none：元素彻底消失，不会触发其点击事件。
visibility:hidden：无法触发其点击事件，只是依然占据着页面空间。
opacity:0：可以触发点击事件，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件。
height:0：将元素的高度设置为0，并且设置overflow:hidden。如果元素设置了border，padding等属性不为0，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件。
