布局
文档流
- 文档流（normal flow） 正常布局流
- 文档流时网页中的位置，我们所创建的元素默认都存在与文档流中
- 文档流中的元素，必须要遵循文档流的规则在网页中排列
- 块元素
- 块元素在文档流中自上向下垂直排列
- 块元素的默认宽度会将父元素撑满（默认值为auto）
- 块元素的默认高度被内容撑开
- 行内元素
- 行内元素在文档流中会自左向右水平排列，如果一行不足以容纳所有元素，则会另起一行继续自左向右水平排列（和我们日常的书写相同）
- 行内元素的默认宽度和高度都被内容撑开
水平布局等式
- 子元素会在父元素内容区中排列
- 在文档流中，块元素的水平排列，必须遵循如下一个等式：
- 子元素可见框宽度 + 子元素的水平外边距 = 包含块内容区的宽度
- 200 + 600 = 800
- margin-left + 可见框 + margin-right = 包含块内容区的宽度
- 100 + 200 + 500 = 800 右外边距会自动修正为500
- 500 + 500 + 100 = 800 右外边距会自动修正为-200
- 100 + auto + 100 = 800 宽度为auto，会自动设置为600
- auto + 200 + auto = 800
- auto + auto + 200 = 800
- 当所有的属性值中没有auto，此时浏览器会自动调整右外边距以使等式强制满足
- 当只有一个属性值设置为auto，则浏览器会自动调整该值以使等式满足
- 当左右外边距为auto，而width有值时，则左右外边距会设置为相等的值，以使等式满足
- 当外边距和width同时设置为auto，则设置auto的外边距就是0
- 在文档流中，块元素的垂直排列，不需要遵循等式
- margin-left + border-left + padding-left + width + padding-right + border-right + margin-right =包含块内容区的宽度