文档流又称常规流,指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素)。
一、块级盒子(Block box) 和 内联盒子(Inline box)
在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子和内联盒子。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为:
1. 块级盒子(****display: block;
)
- 在内联的方向上扩展并占据父容器在该方向上的所有可用空间。
- 每个盒子都会换行。
width
和height
属性可以发挥作用。padding
,margin
和border
会将其他元素从当前盒子周围“推开”。
2. 内联盒子(display: inline;
)
- 盒子不会产生换行。
width
和height
属性将不起作用。- 垂直方向的
padding
,margin
和border
会被应用但是不会把其他处于inline
状态的盒子推开。 - 水平方向的
padding
,margin
和border
会被应用且会把其他处于inline
状态的盒子推开。
3. 使用display: inline-block
它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不希望一个项切换到新行,但希望它可以设定宽度和高度。
一个元素使用 display: inline-block
,实现我们需要的块级的部分效果:
- 设置
width
和height
属性会生效。 padding
,margin
, 以及border
会推开其他元素。
但是,它不会跳转到新行,如果显式添加width
和height
属性,它只会变得比其内容更大。
我们通过对盒子display
属性的设置,比如 inline
、 block
或者inline-block
,来控制盒子的外部显示类型。
二、内部和外部显示类型
如上所述, css的盒模型有一个外部显示类型,来决定盒子是块级还是内联。
同样盒模型还有内部显示类型,它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局,也意味着它们和其他块元素以及内联元素一样(如上所述).
但是,我们可以通过使用类似 flex
的 display
属性值来更改内部显示类型。 如果设置 display: flex
,在一个元素上,外部显示类型是 block
,但是内部显示类型修改为 flex
。 该盒子的所有直接子元素都会成为flex元素,会根据 弹性盒子(Flexbox )规则进行布局。
参考资料:盒模型