1、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align 属性规定元素中的文本的水平对齐方式。
text-align: center使 行内元素和内联元素的内容水平居中对齐。
但在IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐
2、IE 盒模型和W3C盒模型有什么区别?
盒模型.jpg
E 盒模型的 width= border + padding + 内容宽度
W3C盒模型的 width = 内容宽度
3、*{ box-sizing: border-box;}的作用是什么？
作用是为元素设定的任何内边距及边框均在设定的宽度和高度中进行绘制，即设置为了IE盒模型。如果是box-sizing: content-box就是w3c盒模型。
4、line-height: 2和line-height: 200%有什么区别?
line-height: 2：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
line-height: 200%：基于当前字体尺寸的百分比行间距。
5、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
去除间隙可以在html中把产生间隙的两标签挤在一起，不留空格；也可以在css中在父元素外设置font-size：0；，然后再再子元素中单独把字体设置回去。
达到顶端对齐，可以给inline-block元素添加vertical-align:top
6、CSS sprite 是什么?
css 雪碧图或精灵图。用一张.png格式图片来放置所有的小图标，然后引用这一张图片，设置background-position来显示不同的图标。这样可以减少向服务器的请求数量，提高加载速度。
7、让一个元素"看不见"有几种方式？有什么区别?
display：none;
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden
和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。适用于那些元素隐藏后不希望页面布局会发生变化的场景。
opacity:0
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
background-color：rgba（0，0，0，0.2）；设置背景色透明
网友评论