温故而知新，display 值得重新学习

水鳜鱼肥
289 阅读5分钟

如果问我 CSS display 有哪些值？我只能答出常用的几个，不超过10个，这还要算上display: none，再早些年，没准我的答案可能还会有dispaly: absolute。没记错的话，学习 CSS 语法首先要学习的属性就是它，值特别多根本记不住，对初学者造成很大困难，至少当年自己学习的时候，就没弄清楚是怎么回事。通过本文简单的 display 结构化学习，你会发现看问题的角度有多重要，这是我们应该掌握的。

2022年4月25日\color{black}2022年4月25日，这原本是极其普通的一天，就像刚刚过去的昨天、前天一样，天还是那么热，火辣辣的。可是就在这一日，CSS 的 display 却掀起了不小的波澜。“属性规范”的背后，竟隐藏着受逻辑驱使的分类速记法。

如往常一样正常上班的打工人，却吃惊的学习了 display 的各种值，其数量高达28个。

这些属性值都是我们需要明白的的，他们有的是常见的，有的是极少使用的，这些毫无交集的属性却都巧合般地归了类。

打工人从 MDN 得知消息以后，迅速地进行询问和调查。首先，就要找出 CSS 属性的源头，经过仔细地盘问和调查以后，发现根源竟在 CSS 规范中写的清清楚楚。

所有属性值，都可以从 CSS Display Module Level 3 中找到解释，于是打工人当机立断，火速打开掘金，立即写下了这篇废话不少的文章，成功描述从文档元素树生成 CSS 格式框树，如何定义控制它的显示属性。

image.png

六大类

请慢慢记住上面那张图，它绝对是 CSS 中的 MVP。

outside

block 和 inline 你们比我还会，这里不讲。

说说有点奇葩的 run-in，用码上掘金试了下，怎么看都没发现有啥不一样的地方。

去 caniuse 找了找，发现只有 IE 还支持这玩意，可都22年了，去哪里整 IE 浏览器。

image.png

能发现一点说明性文字：

If the run-in box contains a block box, same as block. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box. If an inline box follows, the run-in box becomes a block box.

翻译下，嫁鸡随鸡的意思。

  • 如果包含 block 盒子，那使用 run-in 的盒子就是 block。
  • 如果它后一个元素是 block，那么它会变成 inline，并且神奇的是它和后一个元素并排。

image.png

  • 如果它后一个元素是 inline，那么它会变成 block。

image.png

Chrome为什么从32版本移除这个属性？可能是现象太奇怪了，也不受欢迎，这东西毕竟不固定，变来变去的，CSS 完全有其他更好的方式来实现。

inside

outside 决定的是盒子本身和其他的盒子怎么相处，而 inside 说的是，盒子自己的事，内部的各个元素应该以怎样的关系共存。

flow 是我们熟知的内部默认布局方式，flex、grid、table这些耳熟能熟的布局方式不用多说，讲下 flow-root 和 ruby。

flow-root 定义为生成块容器盒，盒子中的内容使用流式布局。提到它，必然会想到 BFC，我们可以使用 display: flow-root 创建盒模型，从而包含内部浮动。

从字面意思上理解 flow-root，实际上这是在创建一个类似于根元素的行为，类比浏览器的 html 元素作用，即创建一个上下文，里面的内容进行 flow 布局。

ruby 生成 ruby 容器盒，建立对应的格式化上下文，将内容集成到父格式化上下文或创建适合的外部显示类型的容器。它不是给 Ruby 语言定义的布局方式，但都产自于日本，英语里意识是红宝石，日语 ルビ，翻译过来为【旁注标记】的意思，想想咱们的汉语拼音，就很好理解了，来看个例子，由于其兼容问题，只能在 IE、FF 环境下有效果。

image.png

看看这个例子。

image.png

下述例子请在 Firefox 浏览器查看

和 flex 弹性盒布局以及 grid 网格布局一样，ruby 盒布局也有自己对应的详细子项设置，请翻文档学习。

list-item

这个似乎也没什么好讲的，和 markdown 的列表是一样的效果，当时搞它出来，也是为了省事，不想写太多的 html 标签。

internal

table 布局和 ruby 布局都具有复杂的内部结构，子元素通过使用对应值，来决定如何参与布局。

  • table-row-group, table-column-group
  • table-header-group, table-footer-group
  • table-row, table-column
  • table-cell, table-caption

上述8个 table-* 和下述4个 ruby-* 这12个display 都扮演者不同的角色，仅在特定场景下能够发挥作用。

  • ruby-base
  • ruby-text
  • ruby-base-container
  • ruby-text-container,

box

通过 display 可以控制元素将要生成的框的类型，但 box 类型的两个值可以控制元素是否生成任何框。

contents 元素本省不会生成任何框，其子元素和伪元素仍会生成框，并且文本会正常运行。这名字起得多好，符合其含义和定位，只有内容没有框，跟着父走就行。

none 这家伙应该不用多说了，以至于经常怀疑自己有没有写对，写法上是不是还要加上单引号。

legacy

预组合的内联级显示值，作用已知，不过多介绍。

总结

记住这六大类，分别有3、6、1、12、2、4共28个合法值。

在落魄之时望见他人荣光，即使心中酸涩，也不应肆意泄愤不满， 我们要做的，是加倍努力，早晚有一天，我们也会等来属于自己的曙光。

参考资料

  1. CSS Display
  2. 从 display: run-in 中学习新技术
avatar
文章
阅读
粉丝