现代浏览器已经支持了 display 多值语法。我们使用的 display 单值语法已经被视为传统值,但为了向后兼容,浏览器中仍保留了这些值。
display 属性具有相当强大的功能,除了显示某个内容与页面上其他方框的关系是块级还是行内级外,它还能显示应用该属性的方框内部的格式上下文。
为了更好地描述这种行为,display 类型被分为外部显示类型和内部显示类型两部分:
例如:display: flex 变为 display: block flex,意味着外部显示类型是 block(在外部表现为块状元素),但它的子元素是按照 flex 布局呈现的。
这意味着,我们不需要设置 display: flex 来创建带有 flex 子代的块级方框,而是使用 display: block flex。我们使用 display: inline flex 代替 display: inline-flex 来创建带有 flex 子代的 inline-level 框。
有了这一变化,我们就可以讨论显示属性对子元素和周围元素的影响了。这种思维模式可以让我们更轻松地创建更可预测的布局,也更容易解释不同的布局模式及其效果。
从 Chrome 115、Safari 15、Firefox 70 开始,现代浏览器已经支持了 display 多值语法。
下表显示了其中一些新值与规范中的单一值(现称为传统值)之间的映射关系。
Short display Full display block block flow flow-root block flow-root inline inline flow inline-block inline flow-root flex block flex inline-flex inline flex grid block grid inline-grid inline grid
上面表中除了 flow-root 在日常开发中经常被用到,大家应该都比较熟悉。当赋予一个元素 display: flow-root,它就会成为一个新的块格式上下文,成为一个新的正常流程的根元素。从本质上讲,这将导致浮动元素被包含在内。此外,子元素的边距会保留在容器内,而不会随父元素的边距一起折叠。如下示例:
<style>.container { background-color: #000; padding: 10px; .box { background-color: #fff; color: #000; max-width: 500px; margin: 0 0 2em 0; padding: 1em; clear: left; & img { float: left; width: 150px; margin: 0 10px 10px 0; } } .box2 { display: flow-root;} & p { margin: 2em 0; color: #fff }}</style><div class="container"> <div class="box box1"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/balloon-sq1.jpg">The image has been floated to the left. This box does not have display: flow-root. </div> <p>This paragraph follows the box which contains the float.</p> <div class="box box2"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/balloon-sq1.jpg">The image has been floated to the left. This box does have display: flow-root. </div> <p>This paragraph follows the box which contains the float.</p></div>
其实 display: inline-block 和 display: flow-root 这两个值本质上是相同的。众所周知,inline-block 的值会创建一个内联 flow-root,这就是为什么 display: inline-block 的新双值版本是 display: inline flow-root。它的作用与 flow-root 属性完全相同,后者在双值世界中变成了 display: block flow-root。
出现新的特性和功能总是令人兴奋的,在前端世界里,我们要学会拥抱变化。最后,希望其他浏览器也能尽快的支持多值语法,在不远的将来,我们就能以 multi-keyword 语法来编写更有语义化的 CSS。