css-table屬性運用

最近在工做中遇到了一些不經常使用的佈局，不少使用 CSS table 屬性，並結合 ::before，::after 僞元素完成了，使得 HTML 的結構相對更簡單，更具備語義性。當 HTML 結構越清晰，越有規律時，便於閱讀，循環套數據時也能夠少不少的判斷。

1、有下面這樣一個設計，上面是標題，中間是流程圖，下面是電話。

 很明顯：

1. 這個設計圖中的全部內容都是居中顯示的；

2. 標題部分，分爲了中文和英文，下面有兩條線，還有一個菱形；

3. 中間部分，流程的每一項，除了最後一項外，每一項下面都有一個箭頭指向；

4. 電話部分，左右兩邊各有一條線，且各有一個菱形；

這個設計圖的實現中，如今咱們不使用圖片，依靠 CSS 中 table，定位，僞元素來完成。

• 首先，根據效果圖寫出沒有多餘的標籤的 HTML 結構：

注：其它 li 標籤和第一個 li 標籤的結構一致，只是 icon 類名和文本不一樣。

• 思考：

.heading 的佈局

1. 寬度不能固定，得根據文本內容來適應；2. 在父容器中須要水平居中； 3. 線的寬度能夠根據內容的寬度來肯定； 4. 菱形能夠經過正方形順時針或者逆時針旋轉 45° 得到。

.heading {
  position: relative;
  display: table;
  margin: 0 auto 40px;
  padding: 0 80px 18px;
  color: #333;
  &::before,
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc(50% - 20px);
    height: 1px;
    background-color: #999;
  }
  &::before {
    left: 0;
  }
  &::after {
    right: 0;
  }
  strong {
    display: block;
    text-align: center;
  }
  .cn {
    color: #333;
    line-height: .9;
    font-family: "webfont", Arial, sans-serif;  // 這裏使用的網絡安全字體
    font-weight: normal;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .en {
    color: #666;
    font-family: "webfont", Arial, sans-serif;
    font-weight: lighter;
    text-transform: capitalize;
    font-size: 14px;
    line-height: 1;
    &::after {
      content: "";
      position: absolute;  // 這裏的佈局定位已祖先元素含有非 static 定位的元素進行絕對定位
      bottom: -2px;
      left: 50%;
      width: 5px;
      height: 5px;
      background-color: #999;
      transform: translateX(-50%) rotate(45deg);
    }
  }
}

注：

1. .heading 使用 table 顯示，不一樣於 block 顯示的元素寬度跟隨父元素默認 100%。也不一樣於 inline-block 顯示不能經過設置 margin 實現水平居中。

2. .heading 的 padding-right 和 padding-left 使用 80px，這個 。heading 的寬度就會比內容寬度多出 160px，左右兩條線經過定位 left: 0 和 right: 0 沒必要計算。

3. 左右的兩條線寬度使用 (50% - 20px) 留出了 40px 的空白，菱形須要佔位。

4. strong 設置爲 block 顯示，它的寬度就與父元素 .heading 同樣，父元素和其兩個子元素中寬度較大的那個同樣。

5. 在第二個 strong 的僞元素 ::after 中設置了絕對定位，它會相對於祖先元素中(從父元素一層一層往上找)非 static 定位的元素進行定位，這裏是相對於 .heading 進行定位。而且設置 left: 50%, transform：translateX(-50%) rotate(46deg) 讓其在水平位置上居中，而且旋轉 45°。

 

2. .body 的佈局

1. 流程圖每一項寬度不能固定，得根據文本內容來適應；2. 在父容器中須要水平居中； 3. 箭頭能夠根據一條豎線加上一個箭頭來合成。

li {
  position: relative;
  display: table;
  margin-right: auto;
  margin-left: auto;
  height: 40px;
  line-height: 38px;
  padding-right: 35px;
  padding-left: 35px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
  &:not(:last-of-type) {
    margin-bottom: 32px;
    &::before {  // 箭頭的豎線
      content: "";
      position: absolute;
      bottom: -26px;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 20px;
      background-color: #999;
    }
    &::after { // 箭頭
      content: "";
      position: absolute;
      bottom: -26px;
      left: 50%;
      transform: rotate(-45deg);
      transform-origin: left bottom;
      width: 7px;
      height: 7px;
      border-bottom: 1px solid #999;
      border-left: 1px solid #999;
    }
  }
  i {
    font-size: 1.3em;
    color: #a57e60;
    margin-right: 10px;
  }
}

 

3. .join-us 的佈局同 .heading 類似。

 

拓展：

table 屬性的用法遠不止這些

咱們最經常使用到水平垂直佈局也能夠經過設置元素爲單元格樣式來實現：

<div class="parent">
  <div class="child">我在父元素中水平垂直居中</div>
</div>

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #f00;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}