任务9

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

作用是使行级元素或inline-block元素水平居中
作用在块级元素内的行级元素或inline-block元素上；可以使得行级元素或inline-block元素水平居中。

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

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

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

box-sizing: border-box：“IE盒模型”。添加在块级元素上，使得这个块级元素的盒模型width包括content尺寸＋padding＋border。

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

• line-height:2
  是字体的大小的2倍行高，如果字体为20px，则行高为40px。
• line-height:200%
  是相对于父元素的2倍行高

• 例子
  ine-height:200%

  
  image.png
  

  line-height:2

  
  image.png

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

可以让元素同时具有块级元素的一些特点和行内元素的一些特点。例如可以给元素设置宽高的同时，还可以让他们在不占据一整行。

去除缝隙的办法：

• 在html 中将两个标签的之间的空格去掉

• 用一个div包裹住这几个标签，然后给这个div设置font-size:0;样式，在给被包裹住的几个标签设置相应的font-size。
  添加css样式，设vertical-align属性，属性设置为top

  
  image.png

CSS sprite 是什么?

将不同的图标或者图片合并到一张图上

• 优点：减少网页请求，提高网页加载性能
• 缺点：无法缩放，不好修改

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

image.png

有4种，如上图所示，其中opacity（设置透明度，为0时，就会看不见），visibility（让元素看不见）和background-color（只针对背景色，设置背景色的透明度。要设置为透明，第四个数字要为0）虽然透明，但还会占据位置，但是使用display（改变元素的展现状态）的方式，就会消失，不会再占据位置

CSSsrpite

iconfont