常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则
大致分为三种

常规流

又称为，文档流，普通文档流，常规文档流、

所有元素，默认属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有他的包含块，包含块决定盒子排列区域

绝大部分情况下，盒子的包含块为父元素的内容盒

父元素动子元素也一起动，比如修改父元素的margin的时候，子元素位置相对父元素不变

块盒：每个块盒的总宽度，必须刚好等于包含块的宽度

而其width默认为auto

width:auto；会将元素撑开至整个父元素width，但是会减去子节点自己的margin，padding或者border的大小。

width:100%；会强制将元素变成和父元素一样的宽，并且添加额外的空间到这个元素的width上。就是因为这个，会导致很多问题。

使用width:100%永远都不是一个好主意。这个属性容易让人产生你正在定义一个元素可视大小，其实，你是在对这个元素的状态做了巨大的改变。
块元素会填满其父元素的整个width，因为块元素默认的是width:auto;的。

margin的取值也可以是auto，但默认值为0

若宽度，边框，内边距，外边距计算后，仍有剩余空间，则由margin-right填满（自动），比如某块盒比较小而父元素的宽度又很大

在常规流中，块盒在其包含块居中，可以定宽，然后左右margin设置auto

width的auto（默认为auto）优先于margin的auto
现在我们把width去掉，发现原来小正方体左右的margin变成了content

下面我们把margin-left修改为负数，发现红色穿出了蓝色
这是因为width是auto，蓝色的内容框width是固定的，即红色总的width即（margin+padding+border+width）==蓝色width，因为margin为负数，width就越来越大了

2.每个块盒垂直方向上的auto值

height:默认为 auto;适应内容的高度，根据内容多少撑开

margin:auto;表示为0

3.百分比取值

padding，width，margin
以上都是相对于包含块的 宽度 的，包括margin-top: 50%;什么的

高度的百分比：

1.包含块的高度取决于子元素高度（包含块的height没写）
，设置百分比无效

2.包含块的高度不取决于子元素的高度（包含块的height赋值了），有效！

4.上下外边距的合并

两个常规流块盒，上下左右外边距相邻，会进行合并

如果两个margin都不同，合并时取最大的那个

比如说我们设置了margin为50，中间本应该为100，其实上下合并为50了

父子元素也会出现margin相邻的情况，下面解说

肉色和橙色都是蓝色的margin，我们要原本想蓝色离远一点红色，但由于margin相邻合并

我们需要在相邻元素之间加入一个border，那就不是相邻了


但有时候我们并不需要border，这时我们使用padding也可以实现上述功能

小知识：
在body选择器设置
min-width或者max-width可以控制窗口缩小和放大的极限

浮动

定位