CSS常见样式 2

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

text-align: center是让其子元素或者文本水平居中，该样式可继承。作用在行内元素、内联块状元素、文本上，并让它们水平居中。

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

首先，盒子指的是 HTML 中所有的元素，盒子模型就是这些元素占据空间的规则。盒子由四个部分组成 content（内容） padding（内边距） border（边框） margin（外边距）。接下来就区分一下两种盒子模型：

1. IE 盒模型

IE 盒子对于宽高的计算是

width = contentX + paddingLeft + paddingRight + borderLeft + borderRight
height = contentY + paddingTop + paddingBottom + borderTop + borderBottem

什么意思呢？就是说，当你定义了一个<div>的width: 200px;height: 200px时，这里就默认包含了padding和border为 0 。之后增加padding和border时，都是往里面挤了。

2. W3C 盒模型

W3C 盒子宽高是

width = contentX
height = contentY

所以说， W3C 盒模型宽高只和本身内容有关，当你后续添加padding和border时，它就会往外挤。

3. 总结

相对来说， W3C 盒模型更符合我们的认知，宽高就应该由内容决定嘛，与其他属性挂什么钩。但在实际使用上，反而 IE 盒模型更方便。举个例子：

  <style>
    div {
      display: inline-block;
      margin: 0 20px;
      vertical-align: top;
      color: #fff;
      text-align: center;
    }
    .div1 {
      box-sizing: content-box;
      width: 200px;
      height: 200px;
      background-color: red;
      border: 5px solid #000;
      padding: 20px;
    }
    
    .div2 {
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: green;
      border: 5px solid #000;
      padding: 20px;
    }
    .div {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
  <div class="div1"> W3C 盒子</div>
  <div class="div2">IE 盒子</div>
  <div class="div">盒子，只有宽高</div>

在线演示

在上面的例子可以看到，当使用 W3C 盒模型时，容器最后占据的空间会随着padding、border和margin增大而增大；使用 IE 盒模型时，容器最后占据的空间只随margin增大而增大。两者相比，IE 盒模型明显更好控制，我只需要知道margin，就可以为这个容器布局了；而 W3C 盒模型还需要你去计算最终占据空间大小content + padding + border + margin，太麻烦。因此，开发中往往更喜欢用 IE 盒模型。

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

设置所有容器为 IE 盒模型。

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

line-height: 2不带单位的行高，是继承父元素的缩放因子，子元素的行高等于自身字体大小的倍数，lineHeight = selfFontSize * n。line-height: 200%带上单位的行高，是直接继承父元素的行高，子元素的行高为lineHeight = parentFontSize * n，以上。

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

当用户想让元素在同一行显示，但又能设置宽高时，就用inline-block。缝隙的存在是因为空白字符的存在，正常情况下，浏览器会把连续的空白字符合并成一个，所以这里就有一个小小的空白。一个解决办法是在父元素设置字体为零，因为哪怕是空白字符也是字体，设置为 0 之后，就不占空间了。然后再在具体的inline-block里面再设置字体大小，如下：

  <style>
    div {
      font-size: 0;
    }
  span {
    border: 1px solid;
    font-size: 16px;
  }
  </style>
  <div>
    <span>1</span>
    <span>2</span>
  </div>

在线演示

用了inline-block之后，就有一个新的 CSS 属性可以使用了：vertical-align，类似与text-align，不过是垂直方向的，常用有三个值top middle bottom，分别是顶端对齐、垂直居中、底部对齐。

六、CSS sprite 是什么?

CSC sprite，CSS 精灵图，江湖人称雪碧图。是为了减少小图片、小图标的请求次数，而把这些合并到一张图片的技术，这样可以减少不必要的请求。在使用上配合background-size: x y来对这张合并图位移，选中需要的小图。缺点是：1.无法二次调整小图的尺寸。2.需要知道每张小图的位置。

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

1. 保留元素位置

div {
  /* 选择让元素 可见 还是 不可见 */
  visibility: hidden;

  /* 透明度，刚好透明度为 0 的时候，相当于不可见 */
  opacity: 0;
}

2. 不再保留元素位置。

div {
  /* 相当于当前元素不再存在 */
  display: none;
}

在线演示

八、编程任务

代码演示地址 | GitHub