01、CSS佈局

1.1、正常佈局流(Normal flow)

正常佈局流 就是不做任何佈局控制，按照HTML的順序（從左到右，從上而下）進行佈局排列。網頁基於盒子模型進行正常的佈局，主要特點：

• 盒子佈局：單個內容的佈局，把內容放入盒子，加上盒子三件套（padding、boder、margin）。
• 塊盒子縱向佈局：塊級元素單獨一行，按照順序垂直排列，並按其margin分離。
• 內聯盒子水平佈局：內聯元素會在一行水平排列，高度、寬度都取決於內容，直到空間不足另起一行（換行）。高矮不齊，底部對齊。
• 邊距摺疊：垂直相鄰元素的垂直margin會保留最大的那一個，就是盒子的外邊距摺疊。
• 空白摺疊：無論多少個連續空格、換行、tab，都會摺疊為一個空格。

• 還有一種混合型「行內塊元素」屬於行內元素的一種，和其他元素在一行，但元素的高、寬、外邊距都可以設定，如button、img、input。
• 通過CSS樣式的display屬性可以更改元素的佈局型別，如可設定<a>為一個塊元素佈局display: block;

標準佈局總是這樣從左到右、從上而下的順序排列。但當我們要實現一些特殊的的佈局效果時就沒法了，這時的辦法就是 ——