一."text-align: center"的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align: center
作用于块级元素,使得位于块级元素内部的行内元素水平居中。
二.IE 盒模型和W3C盒模型有什么区别?
IE 盒模型中设定的 width 宽度包括 content、padding、border 三部分的宽度;W3C 盒模型中设定的 width 宽度仅包括 content 自身,不包括 padding 和 border 部分的宽度。
三.*{ box-sizing: border-box;}的作用是什么?
box-sizing: border-box
:IE盒模型
box-sizing: content-box
:W3C标准盒模型
设置所有 CSS 的盒模型遵从 IE 盒模型的标准,此时在 CSS 设置的属性中,width 将包括内容宽度 + 内边距宽度 + 边框宽度,不再遵循 W3C 盒模型的标准。
四."line-height: 2"和"line-height: 200%"有什么区别?
line-height: 2
:设置行高为本身文字大小的两倍
line-height: 200%
:设置行高为父元素文字大小的两倍
五."inline-block"有什么特性?如何去除缝隙?高度不一样的"inline-block"元素如何顶端对齐?
inline-block
可以使得元素既拥有行内元素“不占据一整行,宽度由内容宽度决定”特性的同时,又呈现出块级元素“可设置宽高,内外边距”的特性。
去除缝隙 方法1.移除HTML中的空格;
方法2.使用margin负值;
方法3.使用font-size:0。
顶端对齐:vertical-align:top
;
底端对齐:vertical-align:bottom
。
六.CSS sprite 是什么?
CSS sprites叫css精灵图,是一种网页图片应用处理方式,指将不同的图片/图标合并在一张图上,使用CSS sprite 可以减少网络请求,提高网页加载性能。
七.让一个元素"看不见"有几种方式?有什么区别?
-
display:none
: 元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘; -
visibility: hidden
:和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排; -
opacity: 0
:整体透明度为0,但是元素位置依然保留,其它元素不会占据该元素所在的位置; -
background-color: rgba(0,0,0,0)
只会改变背景色透明,不会变元素的颜色。