1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?
text-align定义块状元素中的inline内容的对齐方式作用于块状元素中的inline的内容上,能让文本和inline元素水平居中。
2.IE 盒模型和W3C盒模型有什么区别?
- IE盒模型设置元素的宽高包括content尺寸+ paddng + border
- W3C标准中padding和border所占空间不再width、height范围内
3.*{ box-sizing: border-box;}的作用是什么?
页面中的宽高元素属性可以用IE盒模型计算的方式来处理
4.line-height: 2和line-height: 200%有什么区别?
- line-height: 2 为本身文字的高度的2倍
- line-height: 200%为父元素文字的高度的2倍
5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
特性:既有内联元素的特性(不独占一行,内容决定宽高),有具有块级元素的特性(可设置内宽高和内外边距)
如何去除缝隙:
方法一:将具有inline-block特性的元素包裹一层块级元素,块级元素的font-size设置为0,再给inline-block对应元素添加font-size属性。即可消除缝隙
方法二: 使用margin负值
顶端对齐:添加样式 vertical-align:top;
6.CSS sprite 是什么?
CSS sprite是精灵图指将不同的图片/图标合并在一张图上,在页面元素中通过设置背景图不同的位置来达到展示精灵图上不同的图标的目的。
7.让一个元素"看不见"有几种方式?有什么区别?
- display:none 元素消失,并且不占位置
- opacity:0 设置透明度为0,占用位置
- visibility:hidden 与opacity:0类似,占用位置
- background-color 只是单纯的背景色透明