1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
Paste_Image.png
text-align作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中。注意text-align是可继承元素，所以此块级元素的子元素如果是块级元素会继承它的text-align属性，使子块级元素内的文字或图片或内联元素居中，但是子块级元素不会居中。
2.IE 盒模型和W3C盒模型有什么区别?
Paste_Image.png
从上图可以看到标准
![Uploading Paste_Image_716379.png . . .]W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
Paste_Image.png
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
3.*{ box-sizing: border-box;}的作用是什么？
Paste_Image.png
4.line-height: 2和line-height: 200%有什么区别?
Paste_Image.png
比如父元素设置属性：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。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
特性：
既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可以设置宽高，内外边距），可以设置他text-align属性，可以用vertical-align设置垂直对齐。
去除缝隙：
在源代码中删除空白字符
在其父元素或祖先元素中设置font-size:0;然后再设置其自己需要的字号
顶端对齐：
样式设置为vertical-align:top;
6.CSS sprite 是什么?
CSS sprite是一种网页图片的应用处理方式，将网页中所有应用到的小图标，小图片放到一张大图中，在需要应用图标的时候，通过调整大图的方位来获得图标。优点是能够有效的减少http请求的数量，缺点是不易修改，不好缩放。
7.让一个元素"看不见"有几种方式？有什么区别?
1.opacity:0;设置元素的透明度为0，整体
2.visibility:hidden;和opacity:0类似
3.display:none，使元素消失，不占用位置
4.background-color:rgba(0,0,0,0.2)设置背景色透明
网友评论