代码css常见样式2-入门-任务9

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

text-align:center;作用是让文本的对齐方式为居中，作用在行内元素上，能设置文本和img等行内元素居
中，也对inline-block元素有作用。

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

IE 盒模型中设定的 width 宽度包括 content、padding、border 三部分的宽度；
W3C 盒模型中设定的 width 宽度仅包括 content 自身，不包括 padding 和 border 部分的宽度

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

设置所有 CSS 的盒模型遵从 IE 盒模型的标准，此时在 CSS 设置的属性中，width 将包括内容宽度 + 内边距宽度 + 边框宽度，不再遵循 W3C 盒模型的标准。

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

line-height: 2 ：设置行高为本身文字高度的两倍
line-height: 200% ：设置行高为父元素文字高度的两倍

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

- inline-block 可以使得元素拥有行内元素“不占据一整行，宽度由内容宽度决定”特性的同时，又呈现出块级元素“可设置宽高内外边距”的特性。
- 为解决缝隙问题，可以让两个行内元素紧邻到一起，如：
      `<span class="box"></span><span class="box"></span>`
  也可以设置两个行内元素所占块的字体大小为零，如：
```  <div style="font-size: 0">
          <span class="box b1"></span>
          <span class="box b2"></span>
      </div>
```

6.CSS sprite 是什么?

CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS的"background-position","background-image","background-repeat"的组合进行背景定位.
其优点在于:
- 减少网页的http请求,提高性能,这也是CSS sprites最大的优点,也是其被广泛传播和应用的主要原因;
- 减少图片的字节:多张图片合并成1张图片的字节小鱼多张图片的字节总和;
- 减少了命名困扰:只需要对一张集合的图片命名,不需要对每一个元素进行 命名提高制作效率;

更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变，维护起来更加方便.
其缺点在于:
- 图片合成比较麻烦;
- 背景设置时,需要得到每一个背景单元的精确位置;
- 维护合成图片时,最好只是往下加图片,而不要更改已有图片.

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

- opacity: 0 ; 整体透明度为0，但是元素位置依然保留，其它元素不会占据该元素所在的位置；
- visibility: hidden ; 和opacity:0 类似
- display: none; 元素消失，不占用位置，其它元素会占用该元素所在的位置
- background-color: rgba(0，0，0，0.2) 只会改变背景色，不会变元素的颜色
- height: 0; overflow: hidden;不占据空间,无法点击

1.代码1
2.代码2