1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center可以使元素内容在水平方向上居中，给父级元素加text-align:center,其下的所有行内元素内容都会水平居中显示。该属性只对行内元素有效果对块级元素无效。
2. IE 盒模型和W3C盒模型有什么区别?
IE盒模型和w3c盒模型区别在于计算宽高的方式不同
- IE盒子:
设置的宽（width）:内容宽+左右padding+左右border宽
设置的高（height）:内容高+上下padding+上下border宽 - w3c盒子:
设置的宽高就是内容的宽高不包含其他
3. *{ box-sizing: border-box;}的作用是什么？
* { box-sizing: border-box;}
是CSS使用IE盒模型样式，利用此样式编辑文本宽高时包括了文本的内边距、边框宽度。
4. line-height: 2和line-height: 200%有什么区别?
-
line-height: 2;表示当前元素的行高为当前内容字体大小的2倍。 -
line-height: 200%;表示当前元素的行高为其父元素字体大小的2倍。
5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-bock特性：
不独占一行,可以设置宽高和四个方向的marign和padding,默认宽高为内容宽高。 - inline-block除去缝隙：
- 父元素font-size设置为0,在inline-block元素中重新给font-size赋值。
- 给inline-block元素添加浮动。
- 书写标签的时候inline-block的元素标签需要连着写不能有任何空格换行。
- 利用注释
<span></span><!--
--><span></span> <!-- span元素display为inline-block -->
- 高度不一样的inline-block元素顶端对其：
给inline-block元素添加vertical-align并设置值为top即可。
6.CSS sprite 是什么?
CSS精灵，也叫雪碧图，就是尽可能把网页上的背景图整合到一个图片上，利用背景定位来使用。
这样做可以减少http请求,减少图片的字节,节省流量,提高重用性。
雪碧图生成网站
7. 让一个元素"看不见"有几种方式？有什么区别?
- display: none：元素消失，不占位置
- opacity: 0：元素透明度为0，还占有位置
- visibility: hidden：与opacity: 0类似
- background-color: rgba(0,0,0,0)：背景色透明
网友评论