常規(guī)流

盒模型：規(guī)定單個盒子的規(guī)則

視覺格式化模型（布局規(guī)則）：頁面中的多個盒子排列規(guī)則

視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：

常規(guī)流布局

常規(guī)流、文檔流、普通文檔流、常規(guī)文檔流

所有元素，默認(rèn)情況下，都屬于常規(guī)流布局

總體規(guī)則：塊盒獨占一行，行盒水平依次排列

包含塊（containing block）: 每個盒子都有它的包含塊，包含塊決定了盒子的排列區(qū)域。

絕大部分情況下：盒子的包含塊，為其父元素的內(nèi)容盒。

塊盒

寬度默認(rèn)值是auto

margin的取值也可以是auto，默認(rèn)值是0

auto: 將剩余空間吸收掉

當(dāng)width、margin都為auto時，width吸收能力強于margin

若寬度、邊框、內(nèi)邊距、外邊距計算后，仍然有剩余空間，該剩余空間被margin-right全部吸收

在常規(guī)流中，要讓塊盒在其包含塊中居中，可以定寬，然后左右margin設(shè)置為auto。

在常規(guī)流中，要讓塊盒左右超出其包含塊，可以設(shè)置寬度為auto，然后左右margin設(shè)置為負(fù)數(shù)。

height: auto, 適應(yīng)內(nèi)容的高度

margin: auto, 表示0

padding、寬度、 margin可以取值百分比

以上的所有百分比相對于包含塊的寬度，包括垂直方向百分比也都是相對于包含塊的寬度

高度的百分比：

1). 包含塊的高度是取決于子元素的高度（也就是父元素沒有設(shè)置高度），設(shè)置百分比無效
2). 包含塊的高度不取決于子元素的高度，百分比相對于父元素高度

兩個常規(guī)流塊盒，上下外邊距相鄰，會進(jìn)行合并。

兩個外邊距取最大值。

父子元素的上下外邊距相鄰，也會進(jìn)行合并，但是如果有個間隔就不會合共（比如父元素有border）,也可以通過設(shè)置父元素的padding-top實現(xiàn)子元素的margin-top