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

text-align: center是讓其子元素或者文本水平居中，該樣式可繼承。作用在行內(nèi)元素、內(nèi)聯(lián)塊狀元素、文本上，并讓它們水平居中。

二、IE 盒模型和 W3C 盒模型有什么區(qū)別?

首先，盒子指的是 HTML 中所有的元素，盒子模型就是這些元素占據(jù)空間的規(guī)則。盒子由四個(gè)部分組成 content（內(nèi)容） padding（內(nèi)邊距） border（邊框） margin（外邊距）。接下來就區(qū)分一下兩種盒子模型：

1. IE 盒模型

IE 盒子對(duì)于寬高的計(jì)算是

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

什么意思呢？就是說，當(dāng)你定義了一個(gè)<div>的width: 200px;height: 200px時(shí)，這里就默認(rèn)包含了padding和border為 0 。之后增加padding和border時(shí)，都是往里面擠了。

2. W3C 盒模型

W3C 盒子寬高是

width = contentX
height = contentY

所以說， W3C 盒模型寬高只和本身內(nèi)容有關(guān)，當(dāng)你后續(xù)添加padding和border時(shí)，它就會(huì)往外擠。

3. 總結(jié)

相對(duì)來說， W3C 盒模型更符合我們的認(rèn)知，寬高就應(yīng)該由內(nèi)容決定嘛，與其他屬性掛什么鉤。但在實(shí)際使用上，反而 IE 盒模型更方便。舉個(gè)例子：

  <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>

在線演示

在上面的例子可以看到，當(dāng)使用 W3C 盒模型時(shí)，容器最后占據(jù)的空間會(huì)隨著padding、border和margin增大而增大；使用 IE 盒模型時(shí)，容器最后占據(jù)的空間只隨margin增大而增大。兩者相比，IE 盒模型明顯更好控制，我只需要知道margin，就可以為這個(gè)容器布局了；而 W3C 盒模型還需要你去計(jì)算最終占據(jù)空間大小content + padding + border + margin，太麻煩。因此，開發(fā)中往往更喜歡用 IE 盒模型。

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

設(shè)置所有容器為 IE 盒模型。

四、line-height: 2和line-height: 200%有什么區(qū)別?

line-height: 2不帶單位的行高，是繼承父元素的縮放因子，子元素的行高等于自身字體大小的倍數(shù)，lineHeight = selfFontSize * n。line-height: 200%帶上單位的行高，是直接繼承父元素的行高，子元素的行高為lineHeight = parentFontSize * n，以上。

五、inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對(duì)齊?

當(dāng)用戶想讓元素在同一行顯示，但又能設(shè)置寬高時(shí)，就用inline-block?？p隙的存在是因?yàn)榭瞻鬃址拇嬖?，正常情況下，瀏覽器會(huì)把連續(xù)的空白字符合并成一個(gè)，所以這里就有一個(gè)小小的空白。一個(gè)解決辦法是在父元素設(shè)置字體為零，因?yàn)槟呐率强瞻鬃址彩亲煮w，設(shè)置為 0 之后，就不占空間了。然后再在具體的inline-block里面再設(shè)置字體大小，如下：

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

在線演示

用了inline-block之后，就有一個(gè)新的 CSS 屬性可以使用了：vertical-align，類似與text-align，不過是垂直方向的，常用有三個(gè)值top middle bottom，分別是頂端對(duì)齊、垂直居中、底部對(duì)齊。

六、CSS sprite 是什么?

CSC sprite，CSS 精靈圖，江湖人稱雪碧圖。是為了減少小圖片、小圖標(biāo)的請(qǐng)求次數(shù)，而把這些合并到一張圖片的技術(shù)，這樣可以減少不必要的請(qǐng)求。在使用上配合background-size: x y來對(duì)這張合并圖位移，選中需要的小圖。缺點(diǎn)是：1.無法二次調(diào)整小圖的尺寸。2.需要知道每張小圖的位置。

七、讓一個(gè)元素"看不見"有幾種方式？有什么區(qū)別?

1. 保留元素位置

div {
  /* 選擇讓元素 可見 還是 不可見 */
  visibility: hidden;

  /* 透明度，剛好透明度為 0 的時(shí)候，相當(dāng)于不可見 */
  opacity: 0;
}

2. 不再保留元素位置。

div {
  /* 相當(dāng)于當(dāng)前元素不再存在 */
  display: none;
}

在線演示

八、編程任務(wù)

代碼演示地址 | GitHub