正常布局流

Mr.Hope ... 2019-09-06 CSS 大约 2 分钟

# 元素特性

  • 一个块级元素的内容宽度是其父元素的 100%,其高度与其内容高度一致。

  • 内联元素的 width height 与内容一致。你无法设置内联元素的 width height

  • 如果你想控制内联元素的尺寸,你需要为元素设置 display: block;display: inline-blockinline-block 混合了 inlineblock 的特性。

# 摆放特性

正常布局流(在布局介绍里提到过)是一套在浏览器视口内放置、组织元素的系统。默认的,块级元素按照基于其父元素的书写顺序(默认值: horizontal-tb)的块流动方向(block flow direction)放置。

每个块级元素会在上一个元素下面另起一行,它们会被设置好的 margin 分隔。在英语,或者其他水平书写、自上而下模式里,块级元素是垂直组织的。

内联元素的表现有所不同: 它们不会另起一行;只要在其父级块级元素的宽度内有足够的空间,它们与其他内联元素、相邻的文本内容(或者被包裹的)被安排在同一行。如果空间不够,溢出的文本或元素将移到新的一行。

如果两个相邻的元素都设置了 margin 并且两个 margin 有重叠,那么更大的设置会被保留,小的则会消失。这被称为外边距叠加。