1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
给父元素设置text-align: center属性可以使元素中的文本行居中对齐，作用在块级元素上（比如段落）,可以使其中的文本、图片水平居中。
2. IE 盒模型和W3C盒模型有什么区别?
W3C标准中padding、border所占的空间不在width、height范围内。
IE的盒模型width包括content尺寸＋padding＋border。
3. *{ box-sizing: border-box;}的作用是什么？
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
*{ box-sizing: border-box;}设置所有块级元素，使其并排放置带有指定宽度和高度的框，并把边框和内边距放入框中。
4. line-height: 2和line-height: 200%有什么区别?
设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
设置百分比，会基于父元素字体尺寸的百分比设置行间距。
5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距) - 去除缝隙：父元素的font-size设置为0，子元素的font-size设置为实际大小
- 顶端对齐：给设置了inline-block的元素添加vertical-align: top
6. CSS sprites是什么?
CSS sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
7. 让一个元素"看不见"有几种方式？有什么区别?
1.display：none
优点：简单暴力，不需要多余代码。缺点：会将元素从文档删除。
2.text-indent设置为足够大的负值
这个值设置太大，如 -99999px 时，又会造成浏览器的性能问题，而且有的高分辨率显示器还是会显示出来。
3.position:absolute;top:-999em或left:-999em通过绝对定位使其超出浏览器显示界面。
优点：信手拈来，随意摆放，缺点：用法太死，不能随意修改，比较死板
4.visibility:hidden
缺点：该属性会继承。而且用了该属性属性之后，元素在前端页面是解析不出来的，但是元素依然存在在哪里，只不过我们肉眼不可见，所以元素依然会影响到布局。
5.opacity:0把元素不透明度直接调节到了0,使其消失。
缺点：浏览器IE9以下的是不认opacity属性的.
网友评论