·CSS常见样式2

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

• 令行内及内联元素水平居中、行内元素、文字及img标签。

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

盒子模型.jpg

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

• box-sizing:border-box 为ie的怪异盒模型引进的；
  如果给标签加上box-sizing:border-box 属性，则会告知浏览器的解析器这个元素的盒模型类型为怪异盒模型；
  即给元素设置的宽高不但包括content还会包含padding和border；

w3c标准的盒模型得宽高 只是指的content ，不包括padding和border的值；

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

区别体现在子元素继承时，如下：

• 父元素设置line-height:2会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
  父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

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

• dispiay: inline-block; 既呈现inline的特性，不占据一整行，宽度由内容宽度决定，有呈现block的特性，可设置宽高，内外边距。
  去除间隙可以在html中把产生间隙的两标签挤在一起，不留空格；也可以在css中在父元素外设置font-size：0；，然后再再子元素中单独把字体设置回去。
  达到顶端对齐，可以给inline-block元素添加vertical-align:top

CSS sprite 是什么?

• 指将不同的图片/图标合并到一张图片上。
  使用css sprite可以减少网络请求，提高网页加载性能

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

• opacity: 0 ; 透明度为0，整体
  visibility: hidden; 和opacity:0 类似
  display:none; 消失，不占用位置
  background-color: rgba(0，0，0，0.2)只是背景色透明