关于CSS常见样式2
2017-03-17 本文已影响13人
萧雪圣
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center的作用是使文本居中，作用在行内元素上，能让行内元素中的文本居中。
IE 盒模型和W3C盒模型有什么区别?
- ie678进入怪异模式（不添加 doctype）使用 IE盒模型，宽度 = border + padding + 内容宽度，高度同理。
- chrome， ie9+, ie678(添加 doctype) 使用W3C盒模型， 宽度 = 内容宽度，高度同理。
*{ box-sizing: border-box;}的作用是什么？
- *{ box-sizing: border-box;}的作用是对所有元素应用IE盒模型，指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
- *{ box-sizing: content-box;} 则是设置为W3C盒模型。
line-height: 2和line-height: 200%有什么区别?
- line-height: 2 的作用是设置行高为本身字体大小的两倍。
- **line-height: 200% ** 的作用是设置行高为父元素字体大小的两倍(200%)。
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
1. inline-block有什么特性？
- inline-block 既拥有inline的特性（不占据一整行，所占据的空间为内容宽度），又拥有block的特性（占据整行空间，并可以设置width height）。
2. 如何去除缝隙？
- 方法一： html会将回车符，空格，制表符等识别为一个空白字符，可以将行内元素之间的回车符等空白字符去除。
- 方法二：给inline-block属性元素的父元素设置font-size: 0; 然后再单独设置元素自身的font-size值。
3. 高度不一样的inline-block元素如何顶端对齐?
- vertical-align: top; ——元素顶端对齐
CSS sprite 是什么?
- css精灵图（雪碧图）就是将多张小图片合并为一张大图，然后用background属性定位到具体位置，这样可以减少网络请求从而提高网页性能。
让一个元素"看不见"有几种方式？有什么区别?
- opacity: 0; ——透明度为0，仍占据页面位置。
- visibility: hidden; —— 和opacity: 0; 类似。
- display: none; —— 消失，不占据页面位置。
- background-color: rbga( 0, 0, 0, 0.0) ——只是背景色透明，如果有内容这个方法并没有什么用。
