使用劉（flow）
瀏覽器從HTML文件最上面開始，從上到下沿著元素流逐個顯示遇到的元素。
先考慮快元素，在每個塊元素間加一個換行。內(nèi)聯(lián)元素，總體上從左上方到右下方。
瀏覽器在并排放置內(nèi)聯(lián)元素時，兩者外邊距疊加；
瀏覽器在上下放置內(nèi)聯(lián)元素時，兩者外邊距重疊。
float屬性：實質(zhì)是把一個塊元素放到左邊或右邊，其后的元素繞過這個塊元素（繞流）。
若要把sidebar右懸浮，需要在HTML中把sidebar放到頁面主體內(nèi)容的前面。
這會導(dǎo)致手機等小屏幕上，先顯示sidebar,后顯示主體。
為了解決這個問題，可以讓主體左懸浮，成為左緊右松式。
以上我們設(shè)計的頁面，每個元素都會隨瀏覽器窗口大小變動而擴展。這稱之為流體布局（liquid layout）。
對應(yīng)的是不隨頁面大小擴展的凍結(jié)布局(frozen layout)。
凍結(jié)布局：
把整個<body>內(nèi)的內(nèi)容放到一個<div>中,固定這個<div>的margin。
凝膠布局（Jello layout）是介于前兩者的布局。
凝膠布局就是在凍結(jié)布局的基礎(chǔ)上，加上margin-left:auto;margin-right:auto;
使內(nèi)容永遠位于瀏覽器正中。
絕對定位屬性
sidebar{position:absolute； top: 100px； right: 200px; width: 280px;
sidebar會跳出流，被置于指定位置，且覆蓋在流元素（流中的元素并不當(dāng)他存在）之上。
每個絕對位置的內(nèi)容有z-index屬性，z-index值大的覆蓋在上面。
心緒不寧，無心學(xué)業(yè)，去下盤棋吧。
20161104_22-56
CSS表格
HTML中的結(jié)構(gòu)：
- 創(chuàng)建一個
<div id="main">表示整個表格； - 表格中每一行要創(chuàng)建一個
<div id="row">; - 對于表格中每一列，只需要一個塊元素作為該行內(nèi)該列的內(nèi)容。
CSS中的屬性設(shè)置：
-
div#tableContainer{ display: table; }把整個table建立為表格 -
div#tableRow{ display: table-row; }建立行 - 表格框架已經(jīng)建立，現(xiàn)在可以設(shè)置間距等屬性。
Warning!
- CSS表格（
display:table）與HTML表格不同（在Chapter13會介紹）
CSS表格是創(chuàng)建一種布局的方法，HTML表格是建立一種數(shù)據(jù)結(jié)構(gòu)。
四種定位（position）屬性
- 靜態(tài)定位（static） ：默認(rèn)
- 絕對定位(absolute) ：將塊從流中完全取出，指定一個絕對的位置。
- 固定定位(fixed) ：相對于瀏覽器窗口固定在一個位置（coupon）
- 相對定位(relative) ：相對于其外圍包含元素來定位，元素仍在流中（不太懂）。
