text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
- text-align:center定义行内内容(如文字)相对他的块父元素居中对齐
- 设置在块级元素上
- 让在块级父元素内的行内元素水平和inline-block元素居中
IE盒模型和W3C盒模型有什么区别?
IE盒模型和W3C盒模型的区别就是计算宽高的方法不同
- IE盒模型里的宽度=内容宽度+左右padding值+左右border值+左右margin值
IE盒模型里的高度=内容高度+上下padding值+上下border值+上下margin值 - 3C盒模型里的宽高就等于内容宽高
*{ box-sizing: border-box;}的作用是什么?
将所有元素的盒模型转化为IE盒模型
line-height: 2和line-height: 200%有什么区别?
区别体验在子元素的继承上
- line-height: 2指的是本身文字高度的两倍,父元素设置line-height:2会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
- line-height: 200%;指的是父容器文字高度的两倍,父元素设置line-height:200%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- display:inline-block特性:不独占一行,可以设置宽高和四个方向的marign和padding
- 去除缝隙
1.设置其父元素的字体为0,在设置自身的字体大小
2.元素标签之间不能有换行和空格
3.设置浮动 - 顶端对齐:给元素设置 vertical-align:top
CSS sprite 是什么?
CSS sprite 是图片精灵,就是尽可能把网页上的多个图片整合到一张图片上,利用background-position定位来使用,这样做可以减少http请求,减少图片的字节,节省流量,提高重用性.
让一个元素"看不见"有几种方式?有什么区别?
- display:none 不占位置
- opacity: 0 元素透明度为0,还占有位置
- visibility: hidden:与opacity: 0类似
- background-color: rgba(0,0,0,0):背景色透明
- text-indent: 99999px 首行左缩进到人看不到的地方 其实还在