CSS display的多种写法

CSS display的多种写法

本文将介绍如何通过定义display属性创建一个 CSS formatting box

display属性值

先来看标准文档是怎么描述的吧

从大的分类来讲，display可以分为6个大类:

display-outside

所谓display-outside，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。

display: block：定义最基本的block-level

display: inline：定义最基本的的inline-level

display: run-in： 会根据后面的元素进行转换display为inline | inlin-block | block。 如果它后一个元素是block，那么它会变成inline并且神奇的是它会和后一个元素并排。如果它后一个元素是inline那么它会变成block。

不过很遗憾，Chrome从32版本开始将这个属性移除了。想要了解其实现效果，可以参考标准文档 https://www.w3.org/TR/css-display-3/#run-in-layout

想要了解为什么chrome不支持这个属性，可以阅读 display-run-in-dropped-in-chrome

display-inside

display-inside 通俗地讲，主要是用来管束自己下属的儿子级元素的排布的，规定它们的布局。

display: flow：处于试验阶段的一个属性值，渲染成哪个盒子与外部元素的显示类型有关。

If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

display: flow-root: 可以让元素块状化，同时包含格式化上下文BFC，可以用来清除浮动，去除margin合并，实现两栏自适应布局等。