这是我参与「第五届青训营」伴学笔记创作活动的第 3 天。
Layout 布局
布局是确定内容的大小和位置的算法，通过元素、容器、兄弟节点、内容等信息计算。
常用的三种布局方式：常规流、浮动、绝对定位。
常规流布局
常规流方式：按照块级和行级的顺序依次从前到后渲染。其中分几种布局方式，如行级、块级、表格布局、FlexBox、Grid布局等等。
CSS以盒模型为基础，每个元素可以被看作一个容器，其中有宽度和高度、边框、内容、内外边距等等属性。如下为盒模型示意图。
- width/height属性为content box宽度，取值有长度、百分数或auto（由浏览器根据其他属性判断）。容器有指定的高度时百分数才生效，因为容器高度的计算需要内容的确切高度。
- padding属性为content box的四个方向的内边距，百分数相对于容器宽度。
- border为容器边框，有样式、粗细、颜色三个属性和top/bottom/left/right四个方向。边框颜色不同时会45°斜切分割，可以通过将content box设置成零得到紧贴的四个三角形，再设置透明得到单个三角形。
- margin属性可以设置容器外边距。左右margin都设置为auto可以完成水平居中。
margin collapse特性：上下容器之间的间距为上下两容器的margin取max。
box的宽高指定好后内容也可能溢出容器，可以通过overflow属性控制内容的溢出。默认为visible，即自然溢出，可以选择hidden或scroll。
- 块级布局：不和其他盒子并排摆放，适用所有盒模型属性。
- 行级布局：可以和其他行级一起放在一行或拆开成多行，width和height属性不适用。
“布局”为css中概念，“元素”为html概念，行级元素生成行级盒子。
FlexBox：一种新的排版上下文，可以更灵活的控制子级盒子的摆放属性，现代更常用。特点是流式的单一方向，可以从左到右或从上到下依次布局。
Grid：类似FlexBox一样灵活，但是可以将容器划分为一个二维的网格，并设置每一个子项占哪些行/列。基本所有布局方式都可以用grid实现。
浮动布局
float概念用于实现图文混排时，文字的环绕效果。
基本只在这一种场景下使用，其他场景用flexbox和grid可以替代。
绝对定位布局
绝对定位布局主要依靠参数position属性：
- static：默认值，按正常文档流定位
- relative：相对在文档流的正常原本位置设置偏移量
- absolute：脱离文档流，相对元素的祖先元素中position非static的元素进行定位
- fixed：相对窗口定位
