-
盒子模型：一個盒子有以下幾部分構成：
內容 content
邊框 border
內邊距 padding
外邊距 margin
-
關於盒子：
- 內容屬性：內容本身的寬=width，內容本身的高=height
- 盒子實際寬度=ML + BL + PL + width + PR + BR + MR
盒子實際高度=MT + BT + PT + height+ PB + BB + MB
（備註：第二個 L爲left,R爲right,T爲top,B爲bottom）
-
使用外邊距margin的時候，要注意瀏覽器的兼容性
-
除了值爲0的情況下，其他所有的非零的值，都要加單位，一般是px
-
由於不同的瀏覽器存在着內外邊距的默認值，並且存在差異，所以需要對此清零。如下（用到哪些寫哪些）：[實例演示不同瀏覽器下margin 和ul li]
-
關於列表ul，常用的 list-style:none
-
關於邊框：border:1px solid/dashed/… 顏色
-
常用的一大塊DIV水平絕對居中：margin:0 auto; /*上下爲0，左右auto */
這個會同時設置一個寬度值：如下代碼：
關於CSS的繼承：
子元素會繼承父元素的某些樣式。注意手冊標註了哪些可以繼承哪些不可以。
子元素如果定義了與父元素相同的樣式，會覆蓋父元素的樣式。
【注意】並不是所有的屬性都有繼承，看手冊標註有是否可以繼承
【浮動】
-
CSS的佈局方式（3種）：
- 默認文檔流方式：以默認的HTML元素的結構順序顯示
- 浮動佈局方式：通過設置HTML元素的float屬性顯示
- 定位佈局方式：通過設置HTML元素的position屬性顯示
-
浮動原理分析：對象浮動後，它就脫離了當前的文檔流，可以理解爲飄起來了，它原來的位置就會空出來，它之後的對象就會佔用它原來的地方。舉例：三維空間、排隊、
-
浮動的主要作用：使塊元素（<p>,<div>,<h1>..<h6>,<ul><li>,<table>）可以在一行中顯示。
比較常用的網站中的導航菜單，一般使用ul與li，然後給li設置浮動。附加：ul，常用的 list-style:none ，取消前面的小圓點。
-
當子元素的高度超過了父元素的高度，在IE6中，會把父元素的高度自動增加, float01A.png/ float01B.png。（實例測試）
清除浮動：去掉前面浮動的對象對後面的影響。（如果前面有浮動，後面的就會跟上來，常見的網頁博客的佈局，給丹丹演示）查看：爲什麼清除浮動.png
一般最常用的：clear:both;
這個時候如果瀏覽器縮小，就會出問題。所以，左右部分要被一個父div包起來。代碼見：清除浮動clear.png
深入佈局技巧：CSS中溢出的使用。
如果overflow:hidden，則會隱藏超過對象尺寸的內容。
定位佈局：通過元素的position屬性控制元素的位置。
絕對定位案例解說：下面左圖變成右圖：（絕對定位演示.png）
-
絕對定位深度解析：當我們想要使用絕對定位時，必須要有兩個條件：
- 必須給父元素添加定位屬性，一般採用 position:relative
- 給子元素添加絕對定位 position:absolute，同時設置方向屬性
- 詳細參見 絕對定位深度解析.png
- 絕對定位與相對定位的關鍵區別：
- 絕對定位：是以父元素爲基準點進行定位，並且會脫離文檔流（相當於飄起來到三維空間）；
- 相對定位：是以自身爲基準點進行定位，會離開原位置，但還佔着原來的地方。
- 請看：絕對定位與相對定位的區別.png
-
補充知識：zoom
上面的案例將會按照0.5倍尺寸顯示（僅在IE下有效！），測試後，Google 瀏覽器也可以
清除浮動之IE下zoom的效果演示.png/html
【說明】當子元素有浮動，必須給父元素添加寬高，纔會使父元素有效。
如果不想添加寬高，就給父元素設置 overflow:hidden
備註：爲了解決IE6下不兼容的問題，需要加上 zoom:1
關於僞對象after 和 before ，標籤:before/after{content:”內容”} [查閱手冊]
-
display:none 和 visibility:hidden 的重要區別：
-
display:none; 使用該項後，該對象隱藏，同時不佔用原來的空間
-
visibility:hidden; 用該項後，該對象隱藏但是依然佔用原來的空間
-
z-idex 一般只有兩個值：1和-1,給元素設置z-index:1就會使元素優先顯示在上面，z-index:-1 會使元素跑到下邊去。
注意：設置z-index的同時，必須設置position:absolute
-
清除浮動的方法：案例：父div背景色不顯示（備註：在IE6/7 下 顯示正常！）
- 額外標籤法：
-
當父元素沒有指定高度時，並且它的子元素有浮動，此時這個父元素的高度不會自動增加。舉例：#main沒有設定高度， 裏面包了#left 和 #right，當前left和right都浮動以後，main的背景色是看不到的。（清除浮動之額外標籤法.png），此時的解決方案就是上面圖片所示。
-
父元素使用overflow:hidden，是最簡單的清除浮動的方法。但是如果子元素使用了定位佈局，則會出問題。關於overflow，請看
使用overflow:hidden 的方法解決上面背景色不顯示的問題。（清除浮動之overflow-hidden方法.png）
關於出問題，參見：清除浮動之overflow-和定位同時存在的問題.html/png ， 引出僞對象after.
利用僞對象after方法（最流行的方法）清除浮動之overflow-和定位同時存在的問題 - 解決辦法.html
補充（瞭解即可）：CSS中文字體對應的英文寫法，因爲有時候直接寫中文字體會亂碼：
