问答

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

• text-align: center, 定义行内内容（例如文字）相对它的块父元素水平居中对齐。
• 作用在块元素,行内块元素上。
• 可以让行内元素、行内块元素水平居中。

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

• IE盒模型中设置的width,height 是content + padding + border的大小；
• W3C盒模型中设置的width, height就是content的大小；

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

box-sizing是css3新增属性，*{ box-sizing: border-box;}的作用是修改默认样式，将所有的盒模型设置为IE盒模型。

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

• line-height: 2设置行高为本元素字体大小的2倍
• line-height: 200% 设置行高为父元素字体大小的2倍

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

• inline-block特性：默认与其它元素同行；宽、高、内外边距可设置。
• 如何去除缝隙：去掉元素标签之间的空格或将父元素字体大小设置为0px。

六、CSS sprite 是什么?

• CSSSprites在国内很多人叫css精灵，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，展示出所需要的背景。
• 优点：这样可以减少网络请求, 提高网页的加载性能。
• 缺点：无法缩放，不好修改。

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

• opacity: 0 ； 透明度为0，本元素（包括内容、边距、边框）及其后代元素都会“看不见”，但元素依然存在不影响布局。
• visibility: hidden ； 和opacity:0 类似
• display:none; 元素表现为不存在就好像没有一样，不占位置，会影响布局。
• background-color: rgba(0，0，0，0) 只是背景色透明。

代码

1.使用 CSS Sprite
2.使用字体图标