粉丝群CSS小测第1期答疑文字版

1、CSS小测第一期题目

题目以下图，一个很简单也很经常使用的布局：

左右排布的列表，左侧是标签信息，右侧是描述信息。

在微信粉丝群里面发出题目后，总共收到了将近50人的回答，完整回答列表能够参见此issues：github.com/zhangxinxu/…

也欢迎关注这个github项目。

今天上午在B站进行了答疑直播，本文是整理后的文字版。

2、值得商榷的实现

1. 通配符reset的问题

很多回答出现了下面的CSS：

* { padding: 0; margin: 0; }复制代码

这是一直偷懒的CSS reset写法，我我的是不推荐这种写法的，一来带来比较多的资源开销，并且这些开销彻底是没有必要的，有种为了几棵树砍掉整个森林的感受，在全部的HTML标签中，默认有padding值的屈指可数，彻底没有必要使用通配符进行重置；二来，对于有些元素，默认的margin属性是有用的，比方说表单元素中的单选框和复选框，其默认margin值能够和后面文字保持合理的间距，若是使用通配符重置，就会挤成一坨，阅读体验并很差。

2. 容器定高的问题

有人在实现的时候，容器写死了高度，实际开发的时候咱们不能保证需求会不会变更，比方说增长一个条目的数据。若是咱们的容器高度是定死的，那必然增长新条目的时候会出现布局上的bug，会下降容错性和可维护性，所以，避免定高。

3. 50%的问题

可能有将近1/3的人，在实现这种布局的时候，都是dt和dd宽度各占50%，不管是左右浮动，flex布局或者使用inline-block排列。

示意以下：

dt, dd{
    width: 50%;
}
dt{
    float: left;
}
dd{
    float: right;
    text-align: right;
}复制代码

若是是应付这条题目呢，能够说是勉强及格，可是若是放在实际开发中，则局限性就会比较大。因为dd标签中的内容是动态的，可能就会出现长段的相似于备注这样的选项，此时dd 50%宽度就会有问题，在在移动端，咱们显示的宽度可能就只有300多像素，因而，布局可能就会表现成这样：

并且根据个人测试，通常容器的宽度小于290像素，时间也会掉下来，由于，50%并非一个实际开发中的最佳取值，能够调整下。比较好的作法是，左侧安全宽度，右侧自动分配剩余空间。

4. absolute实现的问题

这是一个使用dd标签进行绝对定位的案例：

使用dd标签一个一个绝对定位，最大的问题在于，维护性太糟糕了，若是要新增一个条目必然要从新再写一段CSS，若是这里有20行数据，难道还要再增长20多个语句？

实际上，dd标签绝对定位是可使用的，可是，没有必要使用top进行一个一个定位，以下修改：

其余那些洋洋洒洒的CSS都是多余的，就下面这几行足够了，兼容性很是OK。

dl {
  border: 1px solid #000;
  position: relative;
}
dd {
  position: absolute;
  right: 0;
  margin: -1.2em 0 0 0;
}复制代码

为何有用，这里不展开，《CSS世界》这本书的绝对定位部分有解答，有兴趣能够买一本看看。

5. relative实现的问题

relative定位有时候很是管用，只是这里不太合适：

dd {
  position: relative;
  top: -20px;
}复制代码

最大的问题在于relative元素定位的时候本来占据的空间他是依然保留的，因而会留下一片空白区域。这里，咱们能够把top改为margin-top效果就能够了。

6. 左右浮动的问题

还有的实现是直接左右浮动，没有定宽：

dt{
    float: left;
    clear: left;
}
dd{
    float: right;
    clear: right;
}复制代码

这个方法要比左右各50%宽度要好一些，适用的场景要更广一些。

这里的clear:right是多余的，没有任何做用。更好的写法是这样：

dt{
    float: left;
    clear: both;
}
dd{
    float: right;
}复制代码

可是，若是把极端状况考虑在内，单纯的左右浮动啊，容易产生错位的问题，例如，咱们右侧的描述内容较多的时候：

这就引出了下面一个比较重要的点，一个好的布局实现，应该要能应付各类极端场景。

5. 有必要考虑极端内容

对于文本内容而言，所能出现的极端场景，包括下面三种：

1. 文字内容不少；
2. 连续的一串英文字符；
3. 没有文字内容。

若是本文的小测题是一道面试题的话，最终对候选人的评价最加分的不是用了什么新技术，也不是用了什么稀奇古怪的奇巧淫技，而是可否预知到可能遇到的场景并在代码层面作好容错处理。这不只能够体现出足够的开发经验，还能体现出全局意识，以及很是重要的基本功。

咱们一个一个来。

首先是连续英文字符。这个简单，咱们可使用word-break属性：

word-break: break-all;复制代码

其次是没有文字内容。这个问题其实是开发的锅，在内容输出的时候，若是没有数据，应该范围“暂无”，或者“-”这样的缺省信息，可是，多年的经验告诉我，从内容输出和呈现上，必定不要相信后台开发人员，咱们本身必定要留一手，不然出现了布局问题，报告单是提到前端这里的。

咱们能够这么处理：

dd:empty::before {
  content '-';
  color: #999;
}复制代码

这样，即便dd标签里面没有输出任何文字，也会有字符占位，这样，布局就很是稳固。

最后是文字内容不少，这样就要靠布局策略了。

3、比较好的实现

这个布局比较好的实现是这样子的：左侧固定宽度，宽度足够安全，右侧自动填满剩余空间。

根据我多年的开发经验，左侧的标签描述虽然也有动态特性，可是内容倒是产品经理决定的，不是用户输入的，所以，个数可控，不要担忧会超过四个字，中文就有这个特性。所以，咱们能够放心大胆地把左侧dt标签占据空间设定为5
em。必定要使用em单位，不要使用px或者rem，这样，不管容器的字号大小是多少，左侧宽度都不会空间不足，很是弹性，容错性很强。

而后，剩下的就是让右侧dd标签内容宽度自动填满剩余空间。

方法不少。

1. dt标签绝对定位

这是其中一我的的解答，代码虽少，倒是很是棒的解答：

dt { position: absolute; }
dd {text-align: right; }复制代码

可是，若是文字内容不少，则dd标签里面内容会和dt发生重叠：

因此，咱们加个5em大小的左margin就能够了。

dt { position: absolute; }
dd {text-align: right; margin-left: 5em; }复制代码

效果以下截图：

此方法兼容性很是好，低版本IE浏览器也支持，但position:absolute元素的层叠顺便比较高，若是页面布局复杂，出现了元素层叠的场景，则此方法须要斟酌下，由于极可能会增长布局的复杂度（额外的z-index进行层级控制）。

2. Flex布局实现

Flex布局也能实现咱们想要的效果，代码以下：

dl {
    display: flex;
    flex-wrap: wrap;
}
dt {
    width: 5em;
}
dd {
    width: calc(100% - 5em);
    text-align: right;
}复制代码

效果以下截图：

关于Flex布局，若是不了解，能够参见我以前写的文章：“写给本身看的display:flex布局教程”。

Flex布局的优势是布局的呈现傻白甜，很好理解。不足就是会存在些许兼容性问题，在一些老旧的Android手机上。

3. Grid布局实现

Grid布局实现是容错性最强，语义最佳的方法，其最大的优势是，左侧的标签描述文字，就是5个汉字，6个汉字，布局依然坚挺。

代码以下：

dl {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1em;
}
dd {
    text-align: right;
}复制代码

效果以下截图：

关于Grid布局，若是不了解，能够参见我以前写的文章：“写给本身看的display:grid布局教程”。

若是没有兼容性方面的限制，则是最佳实现。

4. float浮动实现

有人就用了下面的方法实现，对说明对CSS基础知识仍是比较了解的。

dt {
    width: 5em;
    float: left;    
}
dd {
    text-align: right;
    overflow: hidden;    
}复制代码

关键是这里的overflow:hidden，文字内容再多也不会浮动环绕，具体原理能够见这篇文章“CSS深刻理解流体特性和BFC特性下多栏自适应布局”。

效果以下截图：

此方法兼容性很不错，直到IE7浏览器都支持，IE6不支持，若是要兼容IE6，能够试试加一句_display:inline-block。

5. 借助原生流体特性实现

这个方法是我最后补充的没有人提到的方法，是最最简单的实现：

dd {
    margin: -1.5em 0 0 5em;
    text-align: right;    
}复制代码

就结束了。

宽度自适应，字号大小自适应，文字个数自适应。

效果以下截图：

此方法兼容性最强，上至IE6浏览器都支持，代码最少，各类优势也都有，也不须要掌握什么flex布局，grid布局，也不须要了解什么BFC之类概念，就一个简简单单的margin属性就搞定了，是实际项目开发中的最佳实现。然而，至少在答题的这波人中，却没人知道这个方法，什么缘由呢？

总结一下

以上五种方法，虽然代码是不一样的，可是最终实现的效果倒是如出一辙的。

眼见为实，您能够狠狠的点击这里：CSS小测1比较好的5种布局实现demo

demo页面能够调整容器的宽度和字号大小，咱们能够看到全部5个布局都表现良好，以下GIF录屏示意：

实现完整代码以下：

/* 公共部分 */
dl {
    line-height: 1.5;
    margin: 0; padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff; 
}
dd {
    word-break: break-all;    
    text-align: right;
    margin-left: 0;
}
dd:empty::before {
    content: '-';    
    color: #999;
}
/* absolute实现 */
dt {
    position: absolute;
}
dd {
    margin-left: 5em;    
}
/* flex实现 */
dl {
    display: flex;
    flex-wrap: wrap;
}
dt {
    width: 5em;
}
dd {
    width: calc(100% - 5em);
}
/* grid实现 */
dl {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1em;
}
/* float实现 */
dt {
    width: 5em;
    float: left;    
}
dd {
    overflow: hidden;    
}
/* 流体特性实现 */
dd {
    margin: -1.5em 0 0 5em;    
}复制代码

5、关于粉丝群、小测与直播

上周新建了一个粉丝群，周三发小测题目，每周依次是CSS、DOM和JS，周六上午答疑，答疑方式是直播加群聊。我估计下周就会群满，到时候想进来估计也进不来了。想入群的能够加我好友：zhangxinxu-job，申请信息“入群”，最好带上本身的姓名，方便我备注。

直播地址是：live.bilibili.com/21193211

答疑直播时间为每周六上午10:00-11:00，有时候睡懒觉可能会延后一点。

入群和直播都是免费的，若是你以为有所收获，想要表示感谢，能够关注个人公众号，或者买本个人《CSS世界》就能够了。

（本文完）