task9

1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align:center;的作用是使行内元素与文本水平居中；在块级元素中设
置，使子代行内元素与文本水平居中

2. IE 盒模型和W3C盒模型有什么区别?

在width和height的定义上，
IE盒模型包括了content、padding、border，
W3C盒模型只包括content

3. { box-sizing: border-box;}的作用是什么？

在CSS中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式。 border-box表示怪异盒模型（IE盒子模型），content-box表示正常盒模型（W3C盒子模型）

4. line-height: 2和line-height: 200%有什么区别?

如果在父元素设置line-height，其子元素在继承时就会体现出这两者的区别。

• 设置line-height: 2;，会将子元素的行高设置为子元素自己文本文字大小的两倍
• 设置line-height: 200%;，会将子元素的行高设置为父容器文本文字大小的两倍

作者：吕杰爵链接：https://www.zhihu.com/question/20394889/answer/18436957来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
下图是当line-height:1.5em(150%)的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时，子元素的行高等于16px * 1.5em = 24px：

下图是当line-height:1.5的效果，父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于30px * 1.5 = 45px：

5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• inline-block兼具inline特性（不占据一整行，宽度由内容宽度决定）和block特性（可以设置宽高，内外边距）
• 去除缝隙：

1. 元素之间不空格
2. 把他们的父元素设置font-size:0; 再根据自身需要重新设置font-size

• vertical-align: top;
  根据实际应用效果设置verticla-align的值

6. CSS sprite 是什么?

CSSSprites又称为css精灵图或css雪碧图，是一种网页图片应用处理方式，它能将一些零散的小图标拼到同一张图上，利用CSS Sprites能很好地减少网页的http请求，降低图片占用的字节，从而大大的提高页面的性能，且更易维护。

7. 让一个元素"看不见"有几种方式？有什么区别?

• opacity: 0 ; 透明度为0

• visibility: hidden ; 和opacity:0 类似
  （visibility：hidden 不会触发该元素已经绑定的事件，但保留所占据的空间。opacity：0则仅仅不可见，占据空间，仍可被浏览器发现，能触发各种事件）
• display:none; 不占空间，相当于没有生成这个元素
• background-color: rgba(0，0，0，0) rgba括号中前3个数字代表着 red - green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。

8. cover与contain的区别

background-size: cover 把背景图扩展至能完全覆盖区域，即使有部分超出无法显示。 background-size: contain 使背景图片能完整的显示在区域中，且保持宽高比

代码

图标

iconfont