1 text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align 属性规定元素中的文本的水平对齐方式。它作用在块级元素上,让块级元素中的行内元素居中。
2 IE 盒模型和W3C盒模型有什么区别?
IE盒模型的宽度和高度是指border+padding+content的宽度和高度
W3C 标准盒子模型的宽度和高度是指content的宽度和高度
3 *{ box-sizing: border-box;}的作用是什么?
这个是css3的新样式。
box-sizing: border-box表示的是使用 IE 盒模型。
box-sizing: content-box表示的是使用W3C盒模型。
4 line-height: 2和line-height: 200%有什么区别?
line-height: 2:是它本身文字高度的两倍
line-height: 200%:是其父元素的两倍,指自己的content是父容器content的两倍。
5 inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block可以让元素具有块级元素的属性,可以设置宽高和margin以及padding,同时也具有行内元素的属性只占据内容本身的宽度。
存在缝隙是因为HTML书写时的换行和回车导致的,因为本身换行符也是一个字符,也会占用一个字符的空间,所以看上去就会有一个缝隙,解决方法就是先将有缝隙的两个子元素的父元素的font-size设置为0,然后在给对应的子元素设置自身的字体大小。
高度不一样的两个inline-block的元素默认是按照文字的底部对齐。
可以通过vertical-align来设置对齐方式;下面举例说明
6 CSS sprite 是什么?
CSS Sprites(css精灵图)其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置
7 让一个元素"看不见"有几种方式?有什么区别?
opacity:0;透明度为0
visibility:hidden;看不见但本身是存在的
display:none;消失,不占用位置
background-color:rgba(0,0,0,0.2)0.2是设置背景的透明度