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，因此这里暂不作分析。

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