CSS常见属性二
1、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?
text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。center就是使行内元素水平居中,作用在块级元素上,可以让文本、图片以及其他行内元素在其父元素中水平居中。
2、IE 盒模型和W3C盒模型有什么区别?
W3C盒模型的width和height不包含padding、border,IE盒模型width包括content尺寸+padding+border
3、*{ box-sizing: border-box;}的作用是什么?
box-sizing 属性可以被用来调整这些表现:
a)content-box是默认值,标准盒子模型。 width与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
b)border-box width和height属性包括内容,内边距和边框,但不包括外边距。
width = border + padding + 内容的 width,
height = border + padding + 内容的 height。
4、line-height: 2和line-height: 200%有什么区别?
line-height:2;行高是2倍的文字大小,均以相应的字体为基准。
line-htight:200%;行高是2倍的文字大小,文字大小是指父元素中设定的字体大小。
line-height后面的数值可以带单位也可以不带单位,但是推荐使用不带单位的,这样在继承时不会出现异常。
5、inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
a)特性:inline-block既包含了块级元素的特性,又包含了行内元素的特性,所以我们可以使得多个元素共同占据一行,可以设置宽度和高度,可以设置外边距和内边距。
b)去除缝隙bug:可以将其父元素的字体大小设置为0,然后重新对本元素的字体大小进行设置,中间的空格大小变为0,消除间隙;可以去除代码中的空格和换行,让元素紧贴在一起可以消除空格(或者注释掉空格)。
c)让其顶端对齐的方法可以设置属性vertiacl-align:top属性来设置。
6、CSS sprite 是什么?
CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。
优点:
1.减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2.减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和;
缺点:
1.图片合成比较麻烦;
2.背景设置时,需要得到每一个背景单元的精确位置;
3.维护合成图片时,最好只是往下加图片,而不要更改已有图片。
7、让一个元素"看不见"有几种方式?有什么区别?
opacity:0 透明度为0,占位置,可点击
visibility:hidden 占位置,不可点击
display:none;消失,不占用位置
background-color:rgba(0,0,0,0.0)只是背景色透明度改变