CSS文档流

851 阅读2分钟

文档流又称常规流,指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素)。

一、块级盒子(Block box) 和 内联盒子(Inline box)

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子和内联盒子。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为:

1. 块级盒子(****display: block;

  • 在内联的方向上扩展并占据父容器在该方向上的所有可用空间。
  • 每个盒子都会换行。
  • widthheight 属性可以发挥作用。
  • padding, marginborder会将其他元素从当前盒子周围“推开”。

2. 内联盒子(display: inline;

  • 盒子不会产生换行。
  • widthheight 属性将不起作用。
  • 垂直方向的padding, marginborder会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的padding, marginborder会被应用且会把其他处于 inline 状态的盒子推开。

3. 使用display: inline-block

它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不希望一个项切换到新行,但希望它可以设定宽度和高度。

一个元素使用 display: inline-block,实现我们需要的块级的部分效果:

  • 设置widthheight 属性会生效。
  • padding, margin, 以及border 会推开其他元素。

但是,它不会跳转到新行,如果显式添加widthheight 属性,它只会变得比其内容更大。

我们通过对盒子display 属性的设置,比如 inline、 block 或者inline-block,来控制盒子的外部显示类型。

二、内部和外部显示类型

如上所述, css的盒模型有一个外部显示类型,来决定盒子是块级还是内联。

同样盒模型还有内部显示类型,它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局,也意味着它们和其他块元素以及内联元素一样(如上所述).

但是,我们可以通过使用类似 flexdisplay 属性值来更改内部显示类型。 如果设置 display: flex,在一个元素上,外部显示类型是 block,但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为flex元素,会根据 弹性盒子(Flexbox )规则进行布局。

参考资料:盒模型