盒模型：規定單個盒子的規則
視覺格式化模型（布局規則）：頁面中多個盒子的排列規則
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
常規流浮動定位常規流的叫法：++常規流、普通文件流、常規文件流++
所有元素，預設情況下，都屬於常規流布局
總體規則：塊盒獨佔一行，行盒水平依次排列
包含塊（containing block）：每個盒子都有它的包含塊，包含塊決定了盒子的排列區域
絕大部分情況下，盒子的包含塊，為其父元素的內容盒
塊盒
每個塊盒的總寬度，必須剛好等於包含塊的寬度
寬度的預設值為auto
margin的取值也可以為auto，但預設值為0
atuo：將剩餘空間吸收掉
若有剩餘空間，且當width和margin同時設定auto時,width會吸收掉剩餘空間，width比margin的吸收能力強
每個塊盒垂直方向上的auto值
height：auto，適應內容的高度
margin：auto，表示0
百分比取值
padding、寬、margin可以取值為百分比
以上的所有百分比相對於包含塊的寬度
高的值也可以為百分比
1).包含塊的高度是否取決於子元素的高度，設定百分比無效
父元素
子元素
父元素
子元素
兩個常規流塊盒（兄弟盒或父子盒），上下外邊距相鄰，會進行合併
外邊距會取兩盒中的較大值
可採用padding或border的方式解決此問題
css 常規流 常規流布局
視覺格式化模型 布局規則 頁面中的多個盒子排列規則 視覺格式化模型 大體上將頁面中盒子的排列分為三種方式 1.常規流 2.浮動 3.定位所有元素 預設情況下都屬於常規流布局 總體規則 塊盒獨佔一行,行盒水平依次排列 包含塊 containing block 每個盒子都有它的包含塊,包含快決定了盒子的...
開發布局之 Bootstrap 技術重點
1.重點 柵格系統,響應式工具,預製類 2.資源 bootstrap 來自 twitter 推特 是目前最受歡迎的前端響應式框架。框架 顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預製樣式庫 元件和外掛程式。版本2.xx,3.xx,4.xx 2.使用過程 ind...
HTML5前端開發入門之CSS浮動流
1.什麼是浮動元素的脫標？脫標 脫離標準流 當某乙個元素脫標以後，那麼這個元素看上去就像被從標準流中刪除了一樣，這個就是浮動元素的脫標 2.浮動元素脫標之後會有什麼影響？如果前面乙個元素浮動了，而後面乙個元素沒有浮動，那麼這個時候前面的乙個元素就會蓋住後面的乙個元素 1.浮動元素排序規則 1.1相同...