display屬性
頁面中每個元素都有乙個預設的display屬性，它的值與該元素的型別有關，預設值通常是block（元素顯示為塊元素）或inline（元素顯示為行內元素）。此外值為none時，表示隱藏該元素，但是它和visibility屬性不一樣。把display設定成none元素不會佔據它本來應該顯示的空間，但是設定成visibility: hidden;還會佔據空間。除了上面三個值外，display屬性還有如下這些值，共整理如下：
值 描述
none 此元素不會被顯示。
block 此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block 行內塊元素。（css2.1 新增的值）
list-item 此元素會作為列表顯示。
run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。
table 此元素會作為塊級**來顯示（類似 ），**前後帶有換行符。
inline-table 此元素會作為內聯**來顯示（類似 ），**前後沒有換行符。
table-row-group 此元素會作為乙個或多個行的分組來顯示（類似 ）。
table-header-group 此元素會作為乙個或多個行的分組來顯示（類似 ）。
table-footer-group 此元素會作為乙個或多個行的分組來顯示（類似 ）。
table-row 此元素會作為乙個**行顯示（類似 ）。
table-column-group 此元素會作為乙個或多個列的分組來顯示（類似 ）。
table-column 此元素會作為乙個單元格列顯示（類似 ）
table-cell 此元素會作為乙個**單元格顯示（類似 和 ）
table-caption 此元素會作為乙個**標題顯示（類似 ）
inherit 規定應該從父元素繼承 display 屬性的值。
塊級元素和行內元素
我們需要知道：
塊級元素會獨佔一行，其寬度自動填滿其父元素寬度。預設的值為auto。
行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，直到一行排滿，才會換行，其寬度隨元素的內容自行變化。
塊級元素可以設定 width, height屬性，行內元素設定width, height無效。
塊級元素可以設定內外邊距（margin 和 padding）。而行內元素的只能設定水平方向的內外邊距。（padding-left,padding-right,margin-left,margin-right），但是豎直方向的內外邊距不起效果。（padding-top,padding-bottom,margin-top,margin-bottom）。即水平方向有效，豎直方向無效。最後可以通過修改元素的display屬性來切換行內元素和塊級元素。此外最重要的一點是，當display屬性值取值為inline-block時，該元素同時擁有塊級元素和行內元素的特點：既可以設定長寬和內外邊距，還可以像行內元素一樣併排顯示。
常見的塊元素有：div、p、ul、ol、li、h1~h6、header、footer、aside、form等；
常見的行內元素有：a、span、strong、input、img、em等。
margin屬性
當對設定了寬度的塊級元素使用左右外邊距為auto時可以使其水平居中。因為元素會佔據所指定的寬度後，會將剩餘的寬度一分為二成為左右外邊距。
box-sizing屬性
新增的box-sizing屬性有三個取值：
content-box：表示padding和border不被包含在定義的width和height之內，即在寬度和高度之外繪製元素的內邊距和邊框。預設值。
border-box：表示padding和border被包含在定義的width和height之內。此元素的內邊距和邊框不再會增加它的寬度。(border-box實際上就是ie quirk mode(怪異模式)下的box model。)
inherit：表示從父元素繼承 box-sizing 屬性的值。
calc()
calc()在mdn中是這麼解釋的：
css函式calc()可以用在任何乙個需要、,、、、或的地方。有了calc()，你就可以通過計算來決定乙個css屬性的值了。你還可以在乙個calc() 內部巢狀另乙個calc() ，裡面的 calc() 會被簡單地視為加了括號。
calc是英文單詞calculate(計算)的縮寫，它是css3新增的功能。用來給元素的border、margin、pading、font-size和width等屬性設定動態值。我們可以運用加減乘除來計算不同的單元。例如我們可以用百分比減去em值：
.demo// 減號前後必須都有空格static：預設值。元素以預設的文件流形式排列。
relative：相對定位，相對於其自己正常的位置進行定位，通過top，right，bottom，left來進行上下左右偏移。它原本所佔的空間仍保留，其他元素不會進行填補。
absolute：絕對定位，物件將偏離文件流，原先存在的空間將刪除。它參照的則是離自身最近的定位過的（ position 值不是static的元素。）祖先元素，沒有則以body元素進行定位。
fixed：固定定位，也會脫離文件流，它相對於視窗來定位。
當你定義的css中有position屬性值為absolute、relative或fixed，可用z-index來更改元素的堆疊順序。
float屬性
float屬性一開始是用來文字環繞的，在css中任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度；否則，它們會盡可能地窄。取值有left、right、none。浮動的元素將脫離文件流。
clear屬性用來清除浮動，clear 屬性的值可以是 left、right、both 或 none。此外記住浮動的元素總是包含非浮動的元素。對父元素應用overflow: hidden也可以清除浮動，還可以在可以在父元素上使用偽類 :after 方法 。
下面來看看常見的布局：
1、有二個div,左右二個鋪滿頁面，左邊div定寬，右邊div根據瀏覽器大小自行伸縮。
原理是利用float屬性，第一欄向左浮動。設定第二欄的左外邊距margin-left屬性值等於第一欄的寬度。**如下：
CSS常見布局
一 聖杯布局 雙飛翼布局 布局特點 左右兩欄固定寬度，中間部分自適應 三列等高 實現乙個左邊100px右邊150px中間自適應的布局 先來看看效果圖 這是top 這是left 這是content 這是多行高度！這是right 這是foot 過程說明 1.先寫乙個基本布局 2.將中間left cont...
CSS常見布局
1.1使用inline block和text align parent.child1.2使用margin 0 auto實現 child1.3使用絕對定位實現 parent child margin left的負值為盒子寬度的一半 1.4使用flex布局實現 parent2.1使用vertical a...
css常見布局
一列布局 1.一列布局 不是自適應 header 頁頭 main 主體內容 footer 頁尾 2.一列寬度自適應布局 要想寬度自適應，只需要按照百分比來設定寬度，內容就可以根據瀏覽器視窗自動調節大小。下例中寬度是自適應的，而高度不是自適應的。頁頭主體內容 頁尾 3.單列經典布局 頁頭左列 右列頁尾...