用於控制佈局的屬性。
例如 script 。
display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。
它和 visibility 屬性不一樣。把
display 設置成 none 不會保留元素本該顯示的空間，但是 visibility: hidden; 還會保留。
（4）、還有很多的更有意思的 display 值，例如
list-item 和 table 。這裏有一份詳細的列表。之後我們會討論下
inline-block 和 flex 。
（5）、就像我之前討論過的，每個元素都有一個默認的 display 類型。不過你可以隨時隨地的重寫它！雖然“人工製造”一個行內元素可能看起來很難以理解，不過你可以把有特定語義的元素改成行內元素。常見的例子是：把
li 元素修改成 inline，製作成水平菜單。
2、margin
(1)、#main{width:600px;margin:0 auto;}
設置塊級元素的 width 可以阻止它從左到右撐滿容器。然後你就可以設置左右外邊距爲
auto 來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分爲二成爲左右外邊距。
唯一的問題是，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。讓我們再來改進下這個方案...
（2）、#main{max-width:600px;margin:0 auot;}
在這種情況下使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。這點在移動設備上顯得尤爲重要，調整下瀏覽器窗口大小檢查下吧！
順便提下， 所有的主流瀏覽器包括IE7+在內都支持
max-width ，所以放心大膽的用吧。
3、盒模型
我沒在討論寬度的時候，我們應該講一下它相關的一個重點知識：和模型。當你設置了子元素的寬度，時間展現的元素的卻能超出你的設置：因爲元素邊框和內距會撐開元素。下面先看一個例子，連個想用寬度的元素顯示的實際寬度卻不一樣。
.simple{width:500px;margin:20px auto;} .fancy{width:500px;margin:20px auto;padding 50px;border-width:10px;} [結果：前者小一些；後者大一些。]
以前有一個代代相傳的解決方案是數學。CSS開發者需要用比他們實際想要的寬度小一點的寬度，需要減去內邊距和邊框的寬度。值得慶幸地是你不需要再這麼做了...
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[顯示效果：連個頁面大小寬度一樣~]
既然沒有比這更好的方法，一些CSS開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下CSS代碼放在他們頁面上：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
這樣可以確保所有的元素都會用這種更直觀的方式排版。
既然 box-sizing 是個很新的屬性，目前你還應該像我之前在例子中那樣使用 -webkit- 和 -moz- 前綴。這可以啓用特定瀏覽器實驗中的特性。同時記住它是支持IE8+。
4、position（1)
爲了製作更多複雜的佈局，我們需要討論下 position 屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓我們先一個個的過一遍，不過你最好還是把這頁放到書籤裏。
static
.static {
position: static;
}
static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設置爲其他值的元素表示它會被“positioned”。
relative
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
relative 表現的和 static 一樣，除非你添加了一些額外的屬性。
在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素則不會調整位置來彌補它偏離後剩下的空隙。
fixed
Hello！暫時不要太關注我哦。
</div>一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。
我相信你已經注意到頁面右下角的固定定位元素。你現在可以仔細看看它，這裏有它所使用的CSS：
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
一個固定定位元素不會保留它原本在頁面應有的空隙。
令人驚訝地是移動瀏覽器對 fixed 的支持很差。這裏有相應的解決方案.
absolute
absolute 是最棘手的position值。 absolute 與 fixed 的表現類似，除了它不是相對於視窗而是相對於最近的“positioned”祖先元素。如果絕對定位（position屬性的值爲absolute）的元素沒有“positioned”祖先元素，那麼它是相對於文檔的 body 元素，並且它會隨着頁面滾動而移動。記住一個“positioned”元素是指p osition 值不是 static 的元素。
這裏有一個簡單的例子：
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
這個元素是相對定位的。如果它是 position: static; ，那麼它的絕對定位子元素會跳過它直接相對於body元素定位。
這個元素是絕對定位的。它相對於它的父元素定位。
</div>這部分比較難理解，但它是創造優秀佈局所必需的知識。下一頁我們會使用 position 做更具體的例子。
5、position例子（2）
通過具體的例子可以幫助我們更好地理解“position”。下面是一個真正的頁面佈局。
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}
section s的 margin-left 樣式確保了有足夠的空間容納 nav 元素。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section> <section>注意當你調整瀏覽器窗口時發生了什麼。效果很贊！
</section> <footer>如果你使用了一個固定定位的頁眉或頁腳，確保有足夠的空間來顯示它們！我在 body 上面加了 margin-bottom 。
這個例子在容器比nav元素高的時候可以正常工作。如果容器比nav元素低，那麼nav會溢出到容器的外面。之後我們會討論下其他佈局技術，它們都各有優劣。
6、float
另一個佈局中常用的CSS屬性是 float 。Float 可用於實現文字環繞圖片，如下：
img {
float: right;
margin: 0 0 1em 1em;
}
7、clear
clear 屬性被用於控制浮動。比較下面兩個例子：
<div class="box">...</div>
<section>...</section>
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
我感覺好像我在漂浮！
</div>在這個例子中， section 元素實際上是在 div 之後的（譯註：DOM結構上）。然而
div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且
section 元素包圍了整個元素。如果我們想讓 section 顯示在浮動元素之後呢？
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
我感覺好像我在漂浮！
</div>使用 clear 我們就可以將這個段落移動到浮動元素 div 下面。你需要用 left 值才能清除元素的向左浮動。你還可以用
right 或 both 來清除向右浮動或同時清除向左向右浮動。
8、清除浮動（clearfix hack）
在使用浮動的時候經常會遇到一個古怪的事情：
img {
float: right;
}
不......這個圖片比包含它的元素還高， 而且它是浮動的，於是它就溢出到了容器外面！
見證奇蹟的時刻到了！有一種比較醜陋的方法可以解決這個問題，它叫做清除浮動（clearfix hack）.
讓我們加入一些新的CSS樣式：
.clearfix {
overflow: auto;
}
現在再看看發生了什麼：
好多了！
這個可以在現代瀏覽器上工作。如果你想要支持IE6，你就需要再加入如下樣式：
.clearfix {
overflow: auto;
zoom: 1;
}
有些獨特的瀏覽器需要“額外的關照”。清除浮動這譚水很深很深，但是這個簡單的解決方案已經可以在今天所有的主要瀏覽器上工作。
9、浮動佈局例子
完全使用 float 來實現頁面的佈局是很常見的。這裏有一個我之前用 position 實現的佈局例子，這次我使用
float 實現了它。
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
這個例子和之前那個外觀一模一樣。請注意我們在容器上做了“清除浮動”。原本在這個例子中是不需要的，但是當 nav 比非浮動的內容還要高時就需要了。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>10、百分比寬度
百分比是一種相對於包含塊的計量單位。它對圖片很有用：如下我們實現了圖片寬度始終是容器寬度的50%。把頁面縮小看下效果！
article img {
float: right;
width: 50%;
}
你甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度！
百分比寬度佈局
你可以用百分比做佈局，但是這需要更多的工作。在下面的例子中，當窗口寬度很窄時 nav 的內容會以一種不太友好的方式被包裹起來。總而言之，選一種最合適你的內容的方式。
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
當佈局很窄時， nav 就會被擠扁。更糟糕的是，你不能在 nav 上使用 min-width 來修復這個問題，因爲右邊的那列是不會遵守它的。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>11、媒體查詢
“響應式設計（Responsive Design）”是一種讓網站針對不同的瀏覽器和設備“響應”不同顯示效果的策略，這樣可以讓網站在任何情況下顯示的很棒！
媒體查詢是做此事所需的最強大的工具。讓我們使用百分比寬度來佈局，然後在瀏覽器變窄到無法容納側邊欄中的菜單時，把佈局顯示成一列：
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
當你調整瀏覽器窗口大小時，佈局比以前更酷了！
</section> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>現在我們的佈局在移動瀏覽器上也顯示的很棒。這裏有一些同樣使用了媒體查詢的著名站點。在MDN文檔中你還可以學到更多有關媒體查詢的知識。
額外加分點
使用 meta viewport 之後可以讓你的佈局在移動瀏覽器上顯示的更好。
12、inline-block
你可以創建很多網格來鋪滿瀏覽器。在過去很長的一段時間內使用 float 是一種選擇，但是使用
inline-block 會更簡單。讓我們看下使用這兩種方法的例子：
困難的方式（使用浮動）
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在浮動！
</div>我在使用 clear，所以我不會浮動到上面那堆盒子的旁邊。
</div>容易的方式（使用 inline-block）
你可以用 display 屬性的值 inline-block 來實現相同效果。
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>我是一個行內塊！
</div>這次我可沒有用 clear 。太棒了！
你得做些額外工作來讓IE6和IE7支持
inline-block 。有些時候人們談到 inline-block 會觸發叫做 hasLayout 的東西，你只需要知道那是用來支持舊瀏覽器的。如果你對此很感興趣，可以在前面那個鏈接中找到更詳細的信息。否則我們就繼續下去吧。
13、inline-block 佈局
你可以使用 inline-block 來佈局。有一些事情需要你牢記：
vertical-align屬性會影響到inline-block元素，你可能會把它的值設置爲top。- 你需要設置每一列的寬度
- 如果HTML源代碼中元素之間有空格，那麼列與列之間會產生空隙
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}
Tada!
</section> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section> </div>14、column
這裏有一系列新的CSS屬性，可以幫助你很輕鬆的實現文字的多列布局。讓我們瞧瞧：
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
CSS columns是很新的標準，所以你需要使用前綴，並且它不被IE9及以下和Opera Mini支持。還有許多和 cloumn 相關的屬性，點擊這裏瞭解更多。否則讓我們討論下一個主題。
15、flexbox
新的 flexbox 佈局模式被用來重新定義CSS中的佈局方式。很遺憾的是最近規範變動過多，導致各個瀏覽器對它的實現也有所不同。不過我仍舊想要分享一些例子，來讓你知道即將發生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行，基於最新的標準。
網上有不少過時的 flexbox 資料。 如果你想要了解更多有關 flexbox 的內容，從這裏學習如何辨別一份資料是否過時。我已經寫了一份關於最新標準的詳細文章。
使用flexbox你還可以做的更多；這裏只是一些讓你瞭解概念的例子：
使用 Flexbox 的簡單佈局
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
Flexbox好容易使用！
</section> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section> </div>使用 Flexbox 的牛逼佈局
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
空間足夠的時候，我的寬度是200px，如果空間不足，我會變窄到100px，但不會再窄了。
</div> <div class="none">無論窗口如何變化，我的寬度一直是200px。
</div> <div class="flex1">我會佔滿剩餘寬度的1/3。
</div> <div class="flex2">我會佔滿剩餘寬度的2/3。
</div>使用 Flexbox 的居中佈局
.vertical-container {
display: -webkit-flex;
display: flex;
height: 300px;
}
.vertically-centered {
margin: auto;
}
CSS裏總算是有了一種簡單的垂直居中佈局的方法了！
</div> </div>16、css框架
因爲 CSS 佈局很難使用，所以催生了不少 CSS 框架來幫助開發者。如果你想看看那麼這裏有一些。只有在框架的功能契合你的需求時，使用框架纔是個好主意。掌握CSS的工作方式是無可替代的。
到此爲止！如果你對本站有任何反饋，請在Twitter上聯繫我！
