注：带* 部分均为个人思考、分析及补充的原创部分，包含了部分“深入CSS （上）”的内容。
01 CSS布局
布局（Layout）是什么？是确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算。
布局相关技术：常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动（例如做图片浮动）、绝对定位（能覆盖在常规流之上）。
*布局这块内容比较多也非常重要，需要好好的进行学习，对于FlexBox、Grid布局进行一个小小的科普。
*FlexBox：Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
*Grid布局：网格布局，目前唯一一种 CSS 二维布局，是最强大的的 CSS 布局方案。
02 盒子模型
Width:指定content box宽度，取值为长度、百分数（相对于容器的content box宽度）、auto（由浏览器根据其他属性确定）。
Height：指定content box高度，取值为长度、百分数（相对于容器的content box高度，且仅在容器有指定的高度时，百分数才生效）、auto（取值由内容计算得来）。
Padding：指定元素四个方向（top、right、left、bottom）的内边距，百分数相对于容器宽度。
Border：用于指定容器边框样式，粗细和颜色。有三种属性（width、style、color）和四个方向（top、right、left、bottom）。
Margin：指定元素四个方向的外边距，取值同样可以是长度、百分数和auto，且百分数同样是相对于容器的宽度。
*盒子模型是CSS中非常重要的一个模型，必须要清晰地掌握其结构，了解各个部分的区别与关联，才能在设置样式时更加清楚明白，不然很容易在这里出现差错或者浪费过多的时间。
03 块级vs.行级
| Block Level Box | Inline Level Box |
|---|---|
| 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或者拆开成多行 |
| 适用于所有的盒模型属性 | 盒模型中的width和height属性不适用 |
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子内容分散在多个行盒中 |
| Body/article/div/main/section/h1-6/p/ul/li等等 | Span/em/strong/cite/code等等 |
| Display：block | Display：inline |
*了解不同的标签是属于行级标签还是块级标签能够更加方便我们布局规划页面，当然了解行级盒子和块级盒子本身的区别才是最根本最基础的。
