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

3,319 阅读10分钟

一、CSS小测第一期题目

题目如下图,一个很简单也很常用的布局:

CSS基础测试1

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

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

也欢迎关注这个github项目。

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

二、值得商榷的实现

1. 通配符reset的问题

不少回答出现了下面的CSS:

* { padding: 0; margin: 0; }

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

2. 容器定高的问题

有人在实现的时候,容器写死了高度,实际开发的时候我们不能保证需求会不会变动,比方说增加一个条目的数据。如果我们的容器高度是定死的,那必然增加新条目的时候会出现布局上的bug,会降低容错性和可维护性,因此,避免定高。

3. 50%的问题

可能有将近1/3的人,在实现这种布局的时候,都是dtdd宽度各占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绝对定位案例

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

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

absolute绝对定位的实现

其他那些洋洋洒洒的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标签里面没有输出任何文字,也会有字符占位,这样,布局就非常稳固。

最后是文字内容很多,这样就要靠布局策略了。

三、比较好的实现

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

根据我多年的开发经验,左侧的标签描述虽然也有动态特性,但是内容却是产品经理决定的,不是用户输入的,因此,个数可控,不要担心会超过四个字,中文就有这个特性。因此,我们可以放心大胆地把左侧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布局效果截图

关于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;
}

效果如下截图:

flex布局效果截图

关于Grid布局,如果不了解,可以参见我之前写的文章:“写给自己看的display:grid布局教程”。

如果没有兼容性方面的限制,则是最佳实现。

4. float浮动实现

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

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

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

效果如下截图:

flex布局效果截图

此方法兼容性很不错,直到IE7浏览器都支持,IE6不支持,如果要兼容IE6,可以试试加一句_display:inline-block

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

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

dd {
    margin: -1.5em 0 0 5em;
    text-align: right;    
}

就结束了。

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

效果如下截图:

flex布局效果截图

此方法兼容性最强,上至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;    
}

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

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

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

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

入群和直播都是免费的,如果你觉得有所收获,想要表示感谢,可以关注我的公众号,或者买本我的《CSS世界》就可以了。

(本文完)