????盒模型：規(guī)定單個盒子的規(guī)則
????視覺格式化模型（布局規(guī)則）：頁面中的多個盒子排列規(guī)則
????視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：? ?常規(guī)流????? 浮動????? 定位
? ??常規(guī)流布局
? ? ?常規(guī)流退疫、文檔流、普通文檔流逗载、常規(guī)文檔流
????????所有元素瓷马，默認(rèn)情況下叭喜，都屬于常規(guī)流布局
????????總體規(guī)則：塊盒獨占一行，行盒水平依次排列
????????包含塊（containing block）：每個盒子都有它的包含塊靖榕，包含塊決定了盒子的排列區(qū)域标锄。
????????絕大部分情況下：盒子的包含塊，為其父元素的內(nèi)容盒
? ??塊盒
? ? ? ? 1.每個塊盒的總寬度序矩，必須剛好等于包含塊的寬度
????????????寬度的默認(rèn)值是auto
????????????margin的取值也可以是auto鸯绿，默認(rèn)值0
????????????auto：將剩余空間吸收掉
????????????width吸收能力強于margin
????????????若寬度、邊框簸淀、內(nèi)邊距瓶蝴、外邊距計算后，仍然有剩余空間租幕，該剩余空間被margin-right全部吸收
????????????在常規(guī)流中舷手，塊盒在其包含快中居中，可以定寬劲绪、然后左右margin設(shè)置為auto男窟。
? ? 2.每個塊盒垂直方向上的auto值
????????height:auto盆赤， 適應(yīng)內(nèi)容的高度
????????margin:auto， 表示0
????3.百分比取值
????????padding歉眷、寬牺六、margin可以取值為百分比
????以上的所有百分比相對于包含塊的寬度。
? ??高度的百分比：
????1）. 包含塊的高度是否取決于子元素的高度汗捡，設(shè)置百分比無效 ????2）. 包含塊的高度不取決于子元素的高度淑际，百分比相對于父元素高度
? ? 4.上下外邊距的合并
????????兩個常規(guī)流塊盒，上下外邊距相鄰扇住，會進(jìn)行合并春缕。
????????兩個外邊距取最大值。
? ??
? ? 浮動float
? ? ?視覺格式化模型艘蹋，大體上將頁面中盒子的排列分為三種方式：常規(guī)流????浮動????定位.
? ??應(yīng)用場景????
? ? ?文字環(huán)繞????????橫向排列
? ? 浮動的基本特點
? ? ?修改float屬性值為：
????????left：左浮動锄贼，元素靠上靠左
????????right：右浮動，元素靠上靠右
????默認(rèn)值為none
????????當(dāng)一個元素浮動后女阀，元素必定為塊盒(更改display屬性為block)
????????浮動元素的包含塊宅荤，和常規(guī)流一樣，為父元素的內(nèi)容盒
????盒子尺寸
? ? ? 寬度為auto時强品，適應(yīng)內(nèi)容寬度
? ? ? 高度為auto時膘侮，與常規(guī)流一致屈糊，適應(yīng)內(nèi)容的高度??
??????margin為auto的榛，為0.
? ? ? 邊框、內(nèi)邊距逻锐、百分比設(shè)置與常規(guī)流一樣
????盒子排列
? ? ?左浮動的盒子靠上靠左排列
? ? ?右浮動的盒子考上靠右排列
? ? ?浮動盒子在包含塊中排列時夫晌，會避開常規(guī)流塊盒
? ? ?常規(guī)流塊盒在排列時，無視浮動盒子
? ? ?行盒在排列時昧诱，會避開浮動盒子
? ? ?外邊距合并不會發(fā)生
? ??如果文字沒有在行盒中晓淀，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒盏档。
????高度坍塌
? ? ?高度坍塌的根源：常規(guī)流盒子的自動高度凶掰，在計算時，不會考慮浮動盒子
????????清除浮動蜈亩，涉及css屬性：clear
????????默認(rèn)值：none
????????left：清除左浮動懦窘，該元素必須出現(xiàn)在前面所有左浮動盒子的下方
????????right：清除右浮動，該元素必須出現(xiàn)在前面所有右浮動盒子的下方
????????both：清除左右浮動稚配，該元素必須出現(xiàn)在前面所有浮動盒子的下方
? ??????
? ??
