前提：沒有佈局
如果把所有內容都塞進一欄裏，那麼不設置任何佈局也是OK的。
然而，如果用戶把瀏覽器窗口調整的很大，這時閱讀網頁會非常難受：讀完每一行之後，你的視覺焦點要從右到左移動一大段距離。
重點：display屬性
display 是CSS中最重要的用於控制佈局的屬性。
每個元素都有一個默認的 display 值，這與元素的類型有關。對於大多數元素它們的默認值通常是 block 或 inline 。一個 block 元素通常被叫做塊級元素。一個 inline 元素通常被叫做行內元素。
none
另一個常用的display值是 none 。一些特殊元素的默認 display 值是它，例如 script 。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。
它和 visibility 屬性不一樣。把 display 設置成 none 元素不會佔據它本來應該顯示的空間，但是設置成 visibility: hidden; 還會佔據空間。
其他 display 值
還有很多的更有意思的 display 值，例如 list-item、table、inline-block 和 flex 。
每個元素都有一個默認的 display 類型。不過隨時隨地的重寫它！雖然“人爲製造”一個行內元素可能看起來很難以理解，不過可以把有特定語義的元素改成行內元素。
常見的例子是：把 li 元素修改成 inline，製作成水平菜單。
margin: auto;
設置塊級元素的 width 可以防止它從左到右撐滿整個容器。
然後設置左右外邊距爲 auto 來使其水平居中。
元素會佔據你所指定的寬度，然後剩餘的寬度會一分爲二成爲左右外邊距。
max-width
使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。
盒模型
當設置了元素的寬度，實際展現的元素卻超出設置：這是因爲元素的邊框和內邊距會撐開元素。
box-sizing: border-box;
元素的內邊距和邊框不再會增加它的寬度
position定位
static 默認值，
relative 相對定位
absolute 絕對定位，absolute 與 fixed 的表現類似，但是它不是相對於視窗而是相對於最近的“positioned”祖先元素。
fixed 固定定位
float浮動
float: left/right;左/右浮動
clear控制浮動
clear: left; –清除左浮動
clear: right; –清除向右浮動
clear: both; –同時清除向左向右浮動
清除浮動（clearfix hack）
overflow: auto;
清除浮動這潭 水很深很深