CSS 小測 - 01

說在前面

本篇是張鑫旭老師的 粉絲羣第1期CSS小測點評與答疑 的閱後筆記。

題目

HTML 以下：

<dl>
  <dt>手機系統</dt>
  <dd>Android</dd>
  <dt>登錄方式</dt>
  <dd>QQ 互聯登錄</dd>
  <dt>綁定時間</dt>
  <dd>2019-01-02 11:10</dd>
  <dt>綁定狀態</dt>
  <dd>有效</dd>
</dl>
複製代碼

現需實現以下佈局效果：

思路

首先，一個好的佈局須要可以適應各類極端場景，而上圖的佈局可能出現的極端場景有兩種：

• 數據爲空
• 數據過長

後臺返回過來的數據存在問題的狀況在開發中並很多見，本着不信任任何外部數據的原則，咱們要爲數據爲空的狀況作好保護，這裏經過 empty 僞類便可實現：

dd:empty::before{
    content: '-';
    color: $textColor;
}
複製代碼

而數據過長的狀況，則只能在佈局上進行處理了，這裏的關鍵點是：

• 左側保留安全寬度，右側寬度自適應

要實現這樣的佈局，有如下幾個思路：

absolute

首先來看一下沒有任何樣式的狀況下，佈局是怎麼樣的：

因爲塊狀元素的流體特性，咱們可使用 text-align: right 讓 dd 靠右對齊：

dl dd {
    text-align: right;
}
複製代碼

效果以下：

接下來讓 dt 浮起來，讓 dd 佔位就能夠了：

dl dt {
    position: absolute;
}
複製代碼

效果以下：

不過這個狀態還不夠完善，上面提到過一種極端狀況：右側值過長的狀況下，可能會和左側發生重疊。

這個問題，只要左側留有必定的安全寬度便可：

dl dd {
    text-align: right;
    margin-left: 5em;
}
複製代碼

最終效果以下：

flex

固然，新貴 flex 也能很輕鬆的實現這個佈局：

dl {
    display: flex;
    flex-wrap: wrap;
}
dl dt {
    width: 5em;
}
dl dd {
    width: calc(100% - 5em);
    text-align: right;
}
複製代碼

最終效果以下：

float

這個思路要利用到元素的 BFC（Block Formatting Context）特性。詳情能夠看張老師的 CSS深刻理解流體特性和BFC特性下多欄自適應佈局

首先咱們讓 dt 浮起來，而且保留安全寬度：

dl dt{
    width: 5em;
    float: left;
}
複製代碼

效果以下：

這個時候利用 BFC 特性，添加 overflow: hidden 就實現了右側的自適應佈局：

dl dd{
    overflow: hidden;
}
複製代碼

效果以下：

接下來讓文字靠右便可：

dl dd{
    overflow: hidden;
    text-align: right;
}
複製代碼

最終效果以下：

margin

這裏要利用的是原生流體特性：

dl dd{
    margin: -1.5em 0 0 5em;
    text-align: right;    
}
複製代碼

最終結果以下：

結束語

上述代碼見：css 自適應佈局

原文中還有一種方式能夠實現此佈局：Grid 佈局。不過我沒有學過 Grid，因此這裏暫不作分析。

另外原文中還討論了關於兼容性的一些問題，很是值得一看。