[ 基础系列 ] - 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，所以这里暂不做分析。

另外原文中还讨论了关于兼容性的一些问题，非常值得一看。