css的一些知识（二）

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

text-align: center可以设置元素中的文本和行内元素水平居中，作用在block和inline-block的元素上，可以让他们中的行内元素居中。

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

W3C盒模型中

• W3C盒模型中：

width=内容（content）的宽

height=内容（content）的高

IE盒模型

• IE盒模型中：

width=内容（content）的宽+border+padding

height=内容（content）的高+border+padding

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

设置此页面所有元素的盒模型采用IE盒模型。

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

• line-height:2：设置它的行高是它的字体大小的两倍；
• line-height:200%：设置它的行高是它父元素字体大小的两倍；

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

1.inline-block有什么特性？

• 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
• 又呈现 block 特性 (可设置宽高，内外边距)

2.如何去除缝隙？

• 先将父元素的字体大小设为0，再把inline-block元素的字体大小设置为想要；
• 去除两个元素的空白字符；

3.高度不一样的inline-block元素如何顶端对齐?

设置inline-block元素的vertical-align属性：

• bottom：当把值设置为bottom时元素的顶端与行中最低的元素的顶端对；
• top：当把值设置为top时元素的顶端与行中最高的元素的顶端对齐；

六，CSS sprite 是什么?

俗称雪碧图或精灵图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

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

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