CSS常见样式2

text-align:center的作用是什么，作用在什么元素上？

让元素在页面水平居中；作用在block元素上；能让inline-block和inline元素水平居中；

---

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

IE盒模型和W3C盒模型的区别是宽和高的组成：

• IE盒模型的宽和高由 border 、padding 、content 三个元素相加而成；
• W3C盒模型的宽和高就是 content 区的宽和高， border 和 padding 影响。

---

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

将所有盒模型设为IE盒模型。

---

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

• line-height: 2 是以元素本身的字体大小计算行高值，随着该元素字体大小的变化而变化，自适应性更好；
• line-height: 200%是以父元素的字体大小计算行高值，不会跟随本元素变化，当本元素的字体过大时，由于行高不变文字会挤在一起，自适应性差。

---

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

inline-block既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)。
去除缝隙的方法：

• 在两个 inline-block 间不加空白或折行；
• 如果有空白或折行，将父元素的font-size设为0，再对inline-block元素分别设置font-size值。

---

CSS sprite 是什么?

CSS sprite即是CSS精灵图，它将不同的图片/图标合并在一张图上，以达到减少网络请求、提高网页加载性能的目的。

---

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

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