一、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text 文本 align 对齐 centenr 中心。
text-align:center：实现元素内部文字的居中。
二、IE 盒模型和W3C盒模型有什么区别?
20140124141001609.jpg
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
20140124141131218.jpg
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
三、*{ box-sizing: border-box;}的作用是什么？
指定使用IE盒模型，通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width），如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
四、line-height: 2和line-height: 200%有什么区别?
区别体现在子元素继承时：
- 父元素设置line-height:2会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
- 父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
比如父元素设置属性：font- size:14px;line-height:1.5,child设置font-size:26px;
那么父元素：line-height = 14px * 1.5 = 21px，子元素：line-height = 26px * 1.5 = 39px。
父元素设置属性：font-size:14px;line-height:150%,child设置font-size:26px;
那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的line-height = 21px。
五、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block特性：
应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性 -
去除缝隙：
inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。
1、元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了
2、去除闭合标签:
4444.png
3、使用font-size:0
将父元素字体大小设置为0，行内元素单独设置字体大小，就可以去除缝隙
......
六、CSS sprite 是什么?
通俗点讲CSS Sprite就是将多个背景图片拼合到一个图片上。然后在CSS里通过position定义到该图片上，实现多个位置的背景，一张图片搞定。
七、让一个元素"看不见"有几种方式？有什么区别?
1、display:none
设置元素的display为none是最常用的隐藏元素的方法，将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
2、visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
3、opacity:0
opacity属性表示元素的透明度，将元素的透明度设置为0后，元素也是隐藏的，这算是一种隐藏元素的方法。这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间。
4、background-color：rgba（0，0，0，0.2）；设置背景色透明
网友评论