CSS常见样式（下）
2017-09-14 本文已影响0人
饥人谷_Jack
1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
- text-align: center的作用是让元素水平居中。
- text-align作用在块级元素上。
- text-align可以是行内元素、行内块元素或者文本水平居中。
2. IE 盒模型和W3C盒模型有什么区别?
- IE 盒模型width包括padding和border。
- W3C盒模型width不包括包括padding和border，width就是指的内容的宽度。
3. *{ box-sizing: border-box;}的作用是什么？
- 使盒模型的padding和border都计算在width里面，也就是IE 盒模型。
4. line-height: 2和line-height: 200%有什么区别?
- line-height: 2表示行高为元素自身字体大小的两倍；
- line-height: 200%表示其后代的所有行高都是200%，是固定的，不会根据子元素自身的字体大小发生变化。
5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block即有行内元素的特点，也可以设置宽高。
- 使用通配符*{padding: 0;margin: 0;font-size: 0;}即可去掉全局的缝隙；
- 使用vertical-align: top即可使两个元素顶端对齐；
6. CSS sprite 是什么?
- CSS sprite中文名为‘精灵图’，也叫做雪碧图。是把一个个小图标集合在一张图片上，使用图片定位的方法显示某一个图标。减少网站提交数据次数，使网站加载运行更快。
7. 让一个元素"看不见"有几种方式？有什么区别?
-
display:none----将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
-
visibility:hidden----visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景。
-
opacity: 0----opacity表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法，元素本身空间不会被占用。
