CSS常见样式2

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

text-align: center作用于块级元素，使得位于块级元素内部的行内元素水平居中。

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

IE 盒模型中设定的 width 宽度包括 content、padding、border 三部分的宽度；W3C 盒模型中设定的 width 宽度仅包括 content 自身，不包括 padding 和 border 部分的宽度。

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

box-sizing: border-box：IE盒模型
box-sizing: content-box：W3C标准盒模型
设置所有 CSS 的盒模型遵从 IE 盒模型的标准，此时在 CSS 设置的属性中，width 将包括内容宽度 + 内边距宽度 + 边框宽度，不再遵循 W3C 盒模型的标准。

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

line-height: 2 ：设置行高为本身文字大小的两倍
line-height: 200%：设置行高为父元素文字大小的两倍

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

inline-block可以使得元素既拥有行内元素“不占据一整行，宽度由内容宽度决定”特性的同时，又呈现出块级元素“可设置宽高，内外边距”的特性。
去除缝隙 方法1.移除HTML中的空格；
方法2.使用margin负值；
方法3.使用font-size:0。
顶端对齐：vertical-align:top；
底端对齐：vertical-align:bottom。

六.CSS sprite 是什么?

CSS sprites叫css精灵图，是一种网页图片应用处理方式，指将不同的图片/图标合并在一张图上，使用CSS sprite 可以减少网络请求，提高网页加载性能。

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

• display:none： 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘；
• visibility: hidden：和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排；
• opacity: 0：整体透明度为0，但是元素位置依然保留，其它元素不会占据该元素所在的位置；
• background-color: rgba(0，0，0，0)只会改变背景色透明，不会变元素的颜色。