粉丝群第1期CSS小测点评与答疑

这篇文章发布于 2019年01月12日,星期六,20:35,归类于 CSS相关。 阅读 24984 次, 今日 3 次 18 条评论

 

小测头图

一、CSS小测第一期题目

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

CSS基础测试1

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

在微信粉丝群里面发出题目后,总共收到了将近50人的回答,完整回答列表可以参见此issues(发现有几个回答已经被原作者删掉了,其实没必要的):https://github.com/zhangxinxu/quiz/issues/1

也欢迎关注这个github项目。

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

二、格式与缩进的问题

Github提交信息天然支持Markdown语法,对于CSS代码,很多人直接就一段文字往里面复制,结果文字密密麻麻,让我看得很吃力。这其实就跟团队协作的代码一样的,要有让别人可以轻松阅读你代码的意识。Github天然支持开发语言代码高亮,大家可以用起来,例如CSS可以使用下面的语法:

```css
/* 你的CSS */
```

现在看代码都已经高亮了,那是我周五晚上一个一个编辑过的。

然后很多人不注意缩进,看起来也非常难受:

缩进问题

虽然都是小事,但……怎么说呢,那些在职场上走得更高更远的人,往往是把那些小事都做到尽善尽美的人。

由于每个行为每个个体的行为是不可预料的,所以下一次发布小测题的时候我会强调一下代码排版和格式的问题,否则苦的还是自己。

三、答题点评之值得商榷的实现

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标签标签元素全部挤成一团,我起初以为是选择器用的不当,修改了一番,发现还是没有任何效果,妈呀,这么多人看着呢,有点尴尬呀。后来打开控制台一看样式解析,当场吐血三升,top属性值的单位居然没有写!完全没有想到会这里会缺个单位[捂脸]。

使用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定位,说明其思路易于常人,非常开阔,是个有创造力的人;再者采用relative定位的想法其实挺好的,有时候relative定位非常管用,有种天衣无缝配合的舒畅。说可惜还有另外一个重要原因是仿佛看到了一个内心敏感的人,我担心以后的小测回答,他不会再回答任何问题,因为怕暴露自己实现的不足,让别人看到自己的短处,这其实是很糟糕的。快速成功的捷径之一,就是勇于犯错,主动犯错,发现自己的不足,并加以改正,绝对提高的非常快。如果你什么都压在心里,放弃了这次别人给你指正的机会,永远意识不到自己哪方面还有所欠缺,何来的学习,成长与提高呢?

说的有点多了,希望是自己想多了!

回到这里,relative定位有时候非常管用,只是这里不太合适:

dd {
  position: relative;
  top: -20px;
}

最大的问题在于relative元素定位的时候原本占据的空间他是依然保留的,于是会留下一片空白区域。这里,我们可以把top改成margin-top效果就可以了。

6. 左右浮动的问题

还有的实现是直接左右浮动,没有定宽:

dt{
    float: left;
    clear: left;
}
dd{
    float: right;
    clear: right;
}

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

先说些题外话,在《CSS世界》中提到过,没有任何理由使用clear:leftclear:right,直接使用clear:both代替。

直播的时候,我想强调一下这个观点,然后就把后面clear:right改成clear:both,结果布局错位了,当时我就慌了,难道我的研究结论有问题?刚刚又测了一下,发现是被误导了,这里的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,申请信息“入群”,最好带上自己的姓名,方便我备注。

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

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

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

(本篇完)

分享到:


发表评论(目前18 条评论)

  1. Sputnik说道:

    有个问题想请教一下:如果对dd设置了margin-left: 5em; 那么不设置onerflow: hidden; 也是可以的吧?

  2. Essentric说道:

    可以弱弱的问一句:最后一种方式,为什么是 `-1.5em`吗?

  3. beyond说道:

    我就是最后一种方法,Bingo!

  4. 桃翁说道:

    哇,看了您的解析收获颇大。
    1. 让我意思到越简单的题越要考虑的更多,越简单就代表约束更少,可能性比较多,开放性比较大,不禁让我想到了之前面试小米(发的笔试题,线下做,做完了把代码打包发过去的那种)的时候,一道面试题最简单的题是求最大公约数,让我获得了实习的机会,我也是去了老大跟我说的,因为这道题大部分人都是只写了一个算法,而我写了一个交互式的网页,可以选择数,然后计算最大公约数,觉得我考虑到用户的使用,所以选择录用了我。
    2. 让我的思路得到的扩展,一个简单的 css 题,竟然有这么多种写法。有些是我刚开始根本没想到的,真的大赞!

  5. 厉害厉害久仰久仰说道:

    大神真的很注意细节啊, 学习一个!

  6. 大喵说道:

    今天过来看大神的微博,先去自己写了一遍例题,再看大神的讲解,很棒,感觉打开了很多思路

  7. webxy说道:

    对方账号异常,无法添加朋友。

  8. lulu说道:

    你微信账号异常加不了好友了大哥

  9. mfk说道:

    既然说到用 calc 的话,dt和dd宽度相当于固定了。可能直接对dt和dd应用display:inline-block应该也是可以的。这种方式可能还要对“换行符也占空间”再处理一下。

  10. 董懂说道:

    添加不上,一直提示“操作太快了,请休息一下……”

  11. d说道:

    参加了这次答题,提交了一个类似第四个浮动的实现,但是当换行后的情况没有考虑全面,没有触发bfc使内容对齐。记得直播的时候提到过flex有一种自动填充剩余空间的属性,看总结里用的还是计算宽度,是flex并没有合适这一情况的属性吗?