text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
作用是使行级元素或inline-block元素水平居中
作用在块级元素内的行级元素或inline-block元素上;可以使得行级元素或inline-block元素水平居中。
IE 盒模型和W3C盒模型有什么区别?
W3C标准中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width包括content尺寸+padding+border
*{ box-sizing: border-box;}的作用是什么?
box-sizing: border-box:“IE盒模型”。添加在块级元素上,使得这个块级元素的盒模型width包括content尺寸+padding+border。
line-height: 2和line-height: 200%有什么区别?
- line-height:2
是字体的大小的2倍行高,如果字体为20px,则行高为40px。 - line-height:200%
是相对于父元素的2倍行高 -
例子
ine-height:200%
line-height:2
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
可以让元素同时具有块级元素的一些特点和行内元素的一些特点。例如可以给元素设置宽高的同时,还可以让他们在不占据一整行。
去除缝隙的办法:
- 在html 中将两个标签的之间的空格去掉
-
用一个div包裹住这几个标签,然后给这个div设置font-size:0;样式,在给被包裹住的几个标签设置相应的font-size。
添加css样式,设vertical-align属性,属性设置为top
CSS sprite 是什么?
将不同的图标或者图片合并到一张图上
- 优点:减少网页请求,提高网页加载性能
- 缺点:无法缩放,不好修改
让一个元素"看不见"有几种方式?有什么区别?
有4种,如上图所示,其中opacity(设置透明度,为0时,就会看不见),visibility(让元素看不见)和background-color(只针对背景色,设置背景色的透明度。要设置为透明,第四个数字要为0)虽然透明,但还会占据位置,但是使用display(改变元素的展现状态)的方式,就会消失,不会再占据位置