css常见样式-2

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

• text-align:center定义行内内容（如文字）相对他的块父元素居中对齐
• 设置在块级元素上
• 让在块级父元素内的行内元素水平和inline-block元素居中

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

IE盒模型和W3C盒模型的区别就是计算宽高的方法不同

• IE盒模型里的宽度=内容宽度+左右padding值+左右border值+左右margin值
  IE盒模型里的高度=内容高度+上下padding值+上下border值+上下margin值
• 3C盒模型里的宽高就等于内容宽高

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

将所有元素的盒模型转化为IE盒模型

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

区别体验在子元素的继承上

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

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

• display:inline-block特性:不独占一行,可以设置宽高和四个方向的marign和padding
• 去除缝隙
  1.设置其父元素的字体为0，在设置自身的字体大小
  2.元素标签之间不能有换行和空格
  3.设置浮动
• 顶端对齐：给元素设置 vertical-align:top

CSS sprite 是什么?

CSS sprite 是图片精灵,就是尽可能把网页上的多个图片整合到一张图片上，利用background-position定位来使用,这样做可以减少http请求,减少图片的字节,节省流量,提高重用性.

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

• display:none 不占位置
• opacity: 0 元素透明度为0，还占有位置
• visibility: hidden：与opacity: 0类似
• background-color: rgba(0,0,0,0)：背景色透明
• text-indent: 99999px 首行左缩进到人看不到的地方 其实还在