这是我参与「第五届青训营 」伴学笔记创作活动的第 34 天
一、盒子模型
布局（Layout）是什么？
- 确定内容的大小和位置的算法；
- 依据元素、容器、兄弟节点和内容等信息来计算。
布局相关技术：
- 常规流（normal flow）文档流，块级 行级 表格布局 FlexBox Grid布局；
- 浮动，设置图片效果；
- 绝对定位，直接盖在常规流上。
盒模型
最简单的盒模型：margin外边距，border边框，padding内边距，content内容
width
- 指定 content box 宽度
- 取值为长度、百分数、 auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
height
- 指定 content box 高度
- 取值为长度、百分数、 auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
auto是什么？？？？
“auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算。”
padding内边距：
- 指定元素四个方向的内边距：padding-top、padding-left、padding-right、padding-down
- 百分数相对于容器宽度
eg：
border边框：
- 制定容器边框样式、粗细和颜色
- 三种属性：
- border-width
- 当四条边框颜色不同时，边框交界线为斜线，可以做形状
margin外边距：
- 制定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
- 使用margin：auto水平居中 margin collapse box-sizing：border-box 包含边框、内边距和内容 overflow 多余字体存放
二、块级VS行级
| block level box块级 | liline level box行级 |
|---|---|
| 不和其他盒子并列摆放 | 可以一行或多行进行摆放 |
| 适用所有盒模型属性 | 盒模型中的width、height不适用 |
| 生成块级盒子 | 生成行级级盒子；内容分散在多个行级（line box）中 |
| body、article、div、main、section、h1-6、p、ul、li等 | body、article、div、main、section、h1-6、p、ul、li等 |
| display：block | display：inline |
