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属性的.