1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
- text-align:center 让元素中的文本的水平对齐方式为居中对齐。
- 作用在行内元素(inline elements)和行内块级元素(inline-block)的父元素（块级元素）身上，让行内元素和行内块级元素居中。
2.IE 盒模型和W3C盒模型有什么区别?
主要区别在两种模型中宽（width）和高（height）包括属性的不同。
- W3C盒模型：
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高
W3C盒模型.png
- IE盒模型：
CSS中的宽（width）=内容（content）的宽+（border+padding）*2
CSS中的高（height）=内容（content）的高+（border+padding）*2
IE盒模型.png
避免触发IE盒模型的方法是使用<!DOCTYPE html>声明，告诉IE采用W3C盒子模型即可。
3.*{ box-sizing: border-box;}的作用是什么？
这是CSS新增属性，设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽高里面，相当于IE盒模型宽高的计算方法。
4.line-height: 2和line-height: 200%有什么区别?
其实区别就在于继承的问题上。200%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。而2则是根据子元素自己字体的大小去乘以2来计算行高。另，2em等也是按照200%的情况来算的。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block的特性：既呈现inline特性(不占据一整行，宽度由内容决定）。又呈现block特性（可设置宽高，内外边距）。
- 如何去除缝隙？
-
去除两个inline-block之间的空格。
QQ截图20171102144936.png
QQ截图20171102144952.png
- 将父元素字体大小设置为0，行内元素单独设置字体大小，就可以去除缝隙。
QQ截图20171102145142.png
QQ截图20171102145319.png
- inline-block元素如何顶端对齐?
vertical-align: top;
6.CSS sprite 是什么?
- CSS精灵图。
把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。
7.让一个元素"看不见"有几种方式？有什么区别?
- opacity: 0; 不透明度为零，整体，占据着位置。
- visibility: hidden; 和opacity: 0;类似，占据着位置。
- display: none; 消失，不占用位置。
- background-color: rgba(0,0,0,0），背景色的不透明度为零（透明），rgba中的a相当于ps中的蒙版或者alpha通道。
8.代码实现样式。
unicode 字体.png
网友评论