盒模型布局规则 | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第5天. 上一节中学习了什么是盒模型, 这一节将学习盒模型中常见的布局规则 : 块级和行级.
块级和行级
块级盒子
- 不和其他盒子并列摆放,单独一行
- 使用所有盒模型中的属性,如边距, border等属性.
行级盒子
- 和其它行级盒子一起放在一行或者拆分成多行
- 盒模型中的width, height不适用(用了也不生效), 由内容决定宽高, 内容越多,宽高越大.
盒子是CSS中的概念, 元素是html中的概念
块级元素
- 默认情况下,块级元素生成块级盒子
- 常见块级标签有 : body, article, div, main, section, h1-6, p, ul, li
行级元素
- 生成行级盒子, 内容分散在多个行盒里面.
- 常见行级标签有 : span, em, strong, cite, code
可以使用display:block和display:inline把元素转换成块级或行级盒子.
display属性
具有以下几个属性值
- block
- inline
- inline-block: 本身是行级的, 可以和inline元素放在同一行. 作为一个整体, 只能放在一行里面, 不能被拆散成多行. 可以设置宽高.
- none : 排版时完全忽略, 不占据布局.
常规流
在 CSS 2.1 规范中定义了常规流（Normal Flow）. 常规流中的任何一个盒子总是某个格式区域（formatting context）中的一部分.
行级 排版上下文
Inline Formatting Context ( IFC )
-
如果一个盒子里只有一个行级盒子, 这样的容器就会创建一个IFC
-
IFC内的排版规则
- 盒子在一行内水平展示, 一行放不下时, 换行展示.
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定垂直方向的对齐
- 行盒会避开浮动元素
overflow-wrap:break-word 可以使得超出元素的文字换行.
块级 排版上下文
Block Formatting Context ( BFC )
-
某些容器会创建一个BFC
- 根元素, 即html标签
- 浮动, 绝对定位, inline-block
- Flex子项和Grid子项
- overflow的值不是visible的块盒, 如overflow:hidden
- display:flow-root;
-
排版规则
- 盒子从上到下摆放
- 垂直方向的margin会合并
- BFC内盒子的margin不会与外面的合并, 例如将div元素设置为
display:flow-root;或overflow:hidden;来与上下文的盒子分隔开. - BFC不会和浮动元素重叠.
既有块级又有行级如何处理
通常不允许一个父级里面既有块级又有行级, 因此会创建匿名的盒子来包裹文字, 如下图右侧所示效果.
值得注意的是, 给span标签设置border, 第一行文字没有右边框, 第三行文字没有左边框, 可以看出行内元素的排版.
