>常規流布局
（1） 常規流 文件流 普通文件流 常規文件流。所有元素，預設情況下，都屬於常規流布局
（2）總體規則：塊盒獨佔一行，行盒水平依次排列
每個塊盒的總寬度，必須剛好等於包含塊的寬度
寬度的預設值是auto，auto:將剩餘空間吸收掉(除去border,padding,margin)
外邊距的預設值為0，設定為auto時，將剩餘空間吸收掉 (width的吸收能力強於margin)
(1) 若寬度、邊框、內邊距、外邊距計算後，仍然有剩餘空間，該剩餘空間被margin-right全部吸收
(2) 在常規流中，塊盒在其包含塊中居中，可以定寬，然後左右margin設定為auto(左右各吸收一半)
(3) 在常規流中，塊盒在其包含塊中時，將width設定為auto，左右margin設定為負數，width會隨之變寬，吸收剩餘內容，達到塊盒的總寬度，剛好等於包含塊的寬度的代數和
(4) 每個塊盒垂直方向上的auto值:
height：auto(預設值)，被內容撐開
margin：auto(預設值)，表示0
padding、width、margin可以取值為百分比(所有百分比都是相當於包含塊的寬度，跟高度沒有關係)
高度的百分比：
（1） 包含塊的高度取決於子元素的高度(父元素沒設定寬高)，這種情況設定寬高無效
（2） 包含塊的高度不取決於子元素的高度(父元素設定寬高)，百分比相對於包含塊的高度
兩個常規流塊盒，上下外邊距相鄰，會進行合併(兩個外邊距的最大值)
(1) 如父元素設定了外邊距，上下外邊距的合併，子元素會和父元素上端重合，這也是前面的
before新增乙個元素的content:"";的原因，使脫離重合(或者父元素設定padding)
浮動的應用
浮動的基本特點
css 常規流 常規流布局
視覺格式化模型 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 1.常規流 2.浮動 3.定位所有元素 預設情況下都屬於常規流布局 總體規則 塊盒獨佔一行,行盒水平依次排列 包含塊 containing block 每個盒子都有它的包含塊,包含快決定了盒子的...
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...
CSS脫離文件流 浮動
什麼是文件流？將窗體從上至下分成一行一行，並在每行中按從左至右依次排放元素，稱為文件流，也稱為普通流。這個應該不難理解，html中全部元素都是盒模型，盒模型占用一定的空間，依次排放在html中，形成了文件流。什麼是脫離文件流？元素脫離文件流之後，將不再在文件流中佔據空間，而是處於浮動狀態 可以理解為...