display 是CSS中最重要的用于控制布局的屬性颈嚼。每個元素都有一個默認的 display 值，這與元素的類型有關。對于大多數(shù)元素它們的默認值通常是 block 或 inline 。一個 block 元素通常被叫做塊級元素驻谆。一個 inline 元素通常被叫做行內(nèi)元素。
- block
div 是一個標準的塊級元素庆聘。一個塊級元素會新開始一行并且盡可能撐滿容器胜臊。其他常用的塊級元素包括 p 、 form 和HTML5中的新元素： header 伙判、 footer 象对、 section 等等。
- inline
span 是一個標準的行內(nèi)元素宴抚。一個行內(nèi)元素可以在段落中 <span> 像這樣 </span> 包裹一些文字而不會打亂段落的布局勒魔。 a 元素是最常用的行內(nèi)元素，它可以被用作鏈接菇曲。 - none
另一個常用的display值是 none 冠绢。一些特殊元素的默認 display 值是它，例如 script 常潮。display: none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素弟胀。它和 visibility 屬性不一樣。把 display 設置成 none 不會保留元素本該顯示的空間喊式，但是 visibility: hidden; 還會保留孵户。 - 其他 display 值
還有很多的更有意思的 display 值，例如 list-item 和 table 垃帅⊙咏欤可參看[詳細列表](https: //developer.mozilla.org/en-US/docs/Web/CSS/display)
盒布局
- 當你設置一個元素為 box-sizing: border-box; 時剪勿，此元素的內(nèi)邊距和邊框不再會增加它的寬度贸诚。
- 既然 box-sizing 是個很新的屬性，目前你還應該像我之前在例子中那樣使用 -webkit- 和 -moz- 前綴。這可以啟用特定瀏覽器實驗中的特性酱固。同時記住它是支持IE8+械念。
. {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
媒體查詢
[MDN文檔](https: //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
inline-block
你可以創(chuàng)建很多網(wǎng)格來鋪滿瀏覽器。在過去很長的一段時間內(nèi)使用 float 是一種選擇运悲，但是使用 inline-block 會更簡單龄减。
你可以使用 inline-block 來布局。有一些事情需要你牢記：
vertical-align 屬性會影響到 inline-block 元素班眯，你可能會把它的值設置為 top 希停。
你需要設置每一列的寬度
如果HTML源代碼中元素之間有空格，那么列與列之間會產(chǎn)生空隙
position
- static
默認值署隘。沒有定位宠能，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
- relative
生成相對定位的元素磁餐，相對于其正常位置進行定位违崇。
因此，"left: 20" 會向元素的 LEFT 位置添加 20 像素诊霹。 - fixed
生成絕對定位的元素羞延，相對于瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定脾还。 - absolute
生成絕對定位的元素伴箩，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定鄙漏。 - inherit
規(guī)定應該從父元素繼承 position 屬性的值赛蔫。
參考： [學習css布局](http: //zh.learnlayout.com/frameworks.html)
