1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align: center的作用是定义行内内容相对于它的块级父元素水平居中;
text-align并不控制块元素自己,而是它的行内内容。
2.IE 盒模型和W3C盒模型有什么区别?
ie定义的宽高包content、padding、border,w3c仅仅指content。
如图:
3.*{ box-sizing: border-box;}的作用是什么?
模拟ie盒模型,如有内边距、描边,宽高包含内容+内边距+描边,不用再换算。
4.line-height: 2和line-height: 200%有什么区别?
line-height: 2 自身元素字体大小*2,先继承2这个倍数,再遍历计算,值是动态的
line-height: 200% 父元素字体大小*2,先算出来然后继承,值是固定的
5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block:兼具block可以设置宽高,inline的不独占一行,默认宽高为内容宽高的特点。
去除缝隙:1.inline-block元素紧挨,没有空隙和换行
2.inline-block的父元素font-size:0;.inline-block再自行设定字体大小
3.inline-block元素设置浮动
高度不一样的inline-block元素如何顶端对齐:vertical-align:top;
6.CSS sprite 是什么?
CSS sprite是CSS雪碧图,指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求,提高网页加载性能。
7.让一个元素"看不见"有几种方式?有什么区别?
opacity: 0 ; 整体包括这个元素内的其他元素透明度为0,占位。
visibility: hidden ; 和opacity:0 类似
display:none; 消失,不占用位置