CSS(cascading style sheet，層疊樣式表）
語法： ①CSS屬性和值之間用冒號分隔
②CSS屬性之間用分號分隔（建議每個屬性後都書寫分號）
③CSS的值有多個的時候使用空格分隔
<head>
<style type="text/css"> css樣式 </style>
<head>
<link rel="stylesheet" href="url" type="text/css">
或者
<style type="text/css">
@import "style.css";
@import url("style.css");
</style>
</head>
推薦使用第一種方式
優先級： ①默認情況下，子級通常先繼承父級標籤屬性
②如果子級和父級擁有相同的屬性，子級優先，就近原則
.類名(類名不能使用數字開頭，不能使用關鍵字來命名) 如：.rr{ color :red}
使用class屬性來調用類名稱
<p class="rr">one</p>
<p class="rr">two</p>
<p class="rr">three</p>
#two{background-color:green}
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
後代選擇器 選擇a元素裏面所有後代元素中的b元素。如： a b{...}
子代選擇器 選擇a元素裏面第一代子元素中的b元素。如： a>b{...}
HTML標籤:僞元素{}
a:link{} 超鏈接沒有任何動作前的狀態
a:hover{} 光標移動到超鏈接上的狀態
a:active{} 點擊超鏈接時的狀態
a:visited{} 訪問過超鏈接的狀態
text-decoration:none 去掉下劃線
內嵌式 > 關聯選擇器(後代，子代，組合(且)) > ID選擇器 > 類選擇器 > HTML選擇器
同級別的後者覆蓋前者，就近原則
1 CSS 尺寸屬性
(注意塊級元素和行內元素的區別)
height 設置元素高度。
width 設置元素的寬度。
2 字體屬性
font-family字體族科
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新宋體 NSimSun
新細明體 PMingLiU
細明體 MingLiU
標楷體 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷體_GB2312 KaiTi_GB2312
font-size 字體大小
font-style 字體風格（normal 正常;italic 斜體;oblique 傾斜）
font-weight字體加粗（ normal 正常;bold 粗體;bolder 更粗;lighter 更細）
text-decoration 規定添加到文本的修飾 ：
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through定義穿過文本下的一條線。
blink 定義閃爍的文本。
3 顏色
color 設定文本的顏色
repeat 默認。背景圖像將在垂直方向和水平方向重複。
repeat-x 背景圖像將在水平方向重複。
repeat-y 背景圖像將在垂直方向重複。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
橫向關鍵字： left center right
縱向關鍵字： top center bottom
百分比：左上角是 0% 0%。右下角是 100% 100%。
5 邊框屬性
border-style 設置4個邊框的樣式
dotted 定義點狀邊框。在大多數瀏覽器中呈現爲實線。
solid 定義實線。
double 定義雙線。
dashed 定義虛線。
none 定義無邊框
...
如果4個值都給定了，分別應用於上，右，下,左。如：border-style: solid dashed dashed solid;
如果給定1個值，應用於各邊; 如：border-style: solid;
如果給定2個值，第一個值應用於上下邊，第二個值應用於左右邊。如： border-style: solid dashed;
border-width 設置4個邊框的寬度
border-color 設置邊框顏色
border 在一個聲明設置所有的邊框屬性。如：order:1px solid #ff0000
6 鼠標光標屬性
cursor 屬性規定要顯示的光標的類型（形狀）。
none 無
auto 默認。瀏覽器設置的光標。
pointer 光標呈現爲指示鏈接的指針（一隻手）
wait 此光標指示程序正忙（通常是一隻表或沙漏）。
list-style-position 設置列表項標記的放置位置。
inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
在Firefox中的查看器中選中ul即可看出區別
list-style-type 設置列表項標記的類型。
none 無標記。
disc 默認。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。
ower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
list-style 在一個聲明中設置所有的列表屬性。如：list-style: square inside url('/i/eg_arrow.gif')
8 表格
優先級： td,th-->tr-->tbody,thead,tfoot-->table (從裏向外的規則)
color,font-size
text-align 文字對齊
background
border 邊框，只能用於table,th,td
margin 間距，只能用於table,caption
padding 內間距，只能用於th,td
width 寬，只能用於table,td,th
height 高，只能用於table,td,th、可以用於tr並且優先級高於td
caption-side 標題位置：top/left/right/botton
padding 內邊距（填充），是設置區塊的內邊距的屬性，是邊框和元素內容之間的間隔距離
border 邊框(注意邊框是有內外倆條邊界的)
width 盒子的寬度
height 盒子的高度
內容 盒子裏面所包含的元素和內容
屬性值：
1個：上下左右都是該值
2個：前者表示上下的值，後者表示左右的值
3個：前者表示上邊的值，中間表示左右的值，後者表示下邊的值
盒子佔據的寬度 = margin*2+width
盒子佔據的高度 = margin*2+height
盒子實際的寬度 = width
盒子實際的高度 = height
W3C盒子 width = 內容
盒子佔據的寬度 = margin*2+border*2+padding*2+width
盒子佔據的高度 = margin*2+border*2+padding*2+height
盒子實際的寬度 = border*2+padding*2+width
盒子實際的高度 = border*2+padding*2+height
另外注意 !important 的使用
p{
color:red !important;
color:blue;
}
當不加!important;的時候，後者覆蓋前者，當加上之後說明第一個,樣式優先級更高，採用前者，但是Ie6不支持!important;
border-color 邊框顏色
border-style 邊框樣式
none 無樣式
dotted 點線
dashed 虛線
solid 實線
double 雙線
groove 槽線
ridge 脊線
inset 內凹
outset 外凸
2. 相鄰兩個兄弟元素的外邊框會發生合併，一般瀏覽器會自動設定他們的外邊距(注意我們可以margin設置爲負值)
3. 如果沒有設置父級元素的內邊距或邊框，那麼它的子元素的邊界會和其合併。(注意邊框是有內外倆條邊界的)
4. 設置一個塊元素居中： marigin:0 auto; （ 第一個表示top和bottom，第二個表示left和right）
5. margin可以設置負值，padding不可以設置
6. 行內元素的margin值，只有左右值，沒有上下值
行內元素不可以設置寬（width）和高（height【但是可以通過line-height設置】），但可以與其他行內元素位於同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字體大小決定，寬度由內容的長度控制。常見的行內元素有:em,font,b,span,a,strong
塊級元素
塊級元素排斥其他元素與其位於同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等
IE6/7及IE8混雜模式中(當IE瀏覽器識別不了DTD就會顯示成混雜模式)，text- align:center可以使塊級元素也居中對齊。其他瀏覽器中，text-align:center僅作用於行內內容上。
改變元素類型：
display
可以將一個行級元素轉換爲塊級元素，但是這種轉換並不能改變元素本質，轉換的只是CSS的盒子的外觀
需要轉換盒子類型的情況：
水平的列表菜單，不斷行的標題，隱藏元素
none 隱藏元素。不會被顯示，不佔空間
block 塊級元素。獨佔一行空間
inline 默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。
inline-block 兼有塊級和行級元素特性，在行內顯示但是可以設定寬高
list-item 此元素會作爲列表顯示。
table 此元素會作爲塊級表格來顯示（類似 <table>），表格前後帶有換行符。
inline-table 此元素會作爲內聯表格來顯示（類似 <table>），表格前後沒有換行符。
table-row-group 此元素會作爲一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group 此元素會作爲一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group 此元素會作爲一個或多個行的分組來顯示（類似 <tfoot>）。
table-row 此元素會作爲一個表格行顯示（類似 <tr>）。
table-column 此元素會作爲一個單元格列顯示（類似 <col>）
table-cell 此元素會作爲一個表格單元格顯示（類似 <td> 和 <th>）
table-caption 此元素會作爲一個表格標題顯示（類似 <caption>）
inherit 規定應該從父元素繼承 display 屬性的值。
float,position
應用了浮動和絕對定位的元素，變成了塊級元素，因此display屬性一般被忽略
如果元素應用了display:none，該元素（以及子元素）被隱藏起來，對其再使用float,position將不再有意義
浮動何時停止？
1. 當遇到一個浮動元素後
2. 當遇到父級元素後
多個盒子都浮動後，就產生了塊級元素水平排列的效果。 多個浮動元素不會相互覆蓋。 若包含的容器太窄，無法容納水平排列的多個浮動元素，那麼最後的浮動盒子會向下移動，但如果浮動元素的高度不同，那麼它們向下移動時可能會被卡住。
float:
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
相對定位 relative: 參照元素原來的位置進行移動，元素原來的空間位不變，元素在移動時會覆蓋其他元素。
固定定位 fixed: 將元素固定在窗口中的某個位置，絕對定位是相對於元素的，固定定位是相對於窗口的，會隨着窗口的一定而移動。在低版本IE中不支持該屬性
絕對定位 absolute:元素完全脫離文檔流，頁面中的其他元素視它不存在，絕對定位元素不會影響到其他元素。絕對定位是參照距離他最近的父級有定位屬性的元素，如果父級元素沒有定位屬性，則會參照文檔
默認定位 static：默認屬性，指定了元素按照常規的文檔流進行定位，靜態定位元素不允許使用top,left和類似其他屬性定位。position的值爲static爲非定位元素，爲其他值時候爲定位元素，因爲static元素不能自定義元素的位置，而其他可以
top: 層距離頁面頂點縱座標的距離
left: 層距離頁面定點橫座標的距離
text-align: 橫向排列 left right center
line-height:行高，內容都在行的中間，可以使用這個屬性設置內容垂直居中
z-index ： 第三個維度 ，值高的元素會覆蓋值低的元素。該屬性可以使得元素脫離文檔流，可能會覆蓋其他元素。
一 CSS簡介
CSS(cascading style sheet，層疊樣式表)是描述文檔怎麼樣被呈現的語言，使用CSS可以對HTML文檔進行描述。語法： ①CSS屬性和值之間用冒號分隔
②CSS屬性之間用分號分隔（建議每個屬性後都書寫分號）
③CSS的值有多個的時候使用空格分隔
二 CSS在網頁中的使用
1 內嵌式
每個HTML元素都包含有一個style屬性，使用該屬性可以直接指定樣式。如<p style=""></p>存在問題：①.不方便修改 ②結構與顯示不能很好的分離 ③建議在測試或個別情況下使用
2 嵌入式
CSS樣式定義內容位於style元素之間，其type屬性必須被定義爲text/css<head>
<style type="text/css"> css樣式 </style>
</head>
3 外部引用時
可以在多個文檔間共享樣式表，提高效率；可以改變樣式表而無須改變HTML文檔。<head>
<link rel="stylesheet" href="url" type="text/css">
或者
<style type="text/css">
@import "style.css";
@import url("style.css");
</style>
</head>
推薦使用第一種方式
三 CSS基本語法規則
1 選擇器
用於選擇html中的元素html標籤選擇器
即html標籤，任何一個HTML元素的標籤名都可以是css的選擇器。如p{ text-indent:10px} /*段落第一行縮進10像素*/ ；h1{ color:red}優先級： ①默認情況下，子級通常先繼承父級標籤屬性
②如果子級和父級擁有相同的屬性，子級優先，就近原則
③類選擇器的優先級高於標籤選擇器
類選擇器
class屬性.類名(類名不能使用數字開頭，不能使用關鍵字來命名) 如：.rr{ color :red}
使用class屬性來調用類名稱
<p class="rr">one</p>
<p class="rr">two</p>
<p class="rr">three</p>
ID選擇器
id屬性（ #id名）#two{background-color:green}
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
關聯選擇器
它們的優先級比單一的選擇器大。後代選擇器 選擇a元素裏面所有後代元素中的b元素。如： a b{...}
子代選擇器 選擇a元素裏面第一代子元素中的b元素。如： a>b{...}
組合選擇器
使用逗號,隔開選擇器，可以減少樣式表的重複聲明。如： h1,h2,h3,h4{color:red}僞元素選擇器
是指對同一個HTML元素的不同狀態的一種定義方式HTML標籤:僞元素{}
a:link{} 超鏈接沒有任何動作前的狀態
a:hover{} 光標移動到超鏈接上的狀態
a:active{} 點擊超鏈接時的狀態
a:visited{} 訪問過超鏈接的狀態
text-decoration:none 去掉下劃線
2 選擇器優先級
多個CSS選擇器同時作用於同一個html時，聲明不同的屬性具有繼承的關係，如果聲明的是相同的屬性，則以優先級高的爲主。內嵌式 > 關聯選擇器(後代，子代，組合(且)) > ID選擇器 > 類選擇器 > HTML選擇器
同級別的後者覆蓋前者，就近原則
3 樣式
樣式是零個或多個以分號分割的【屬性名：屬性值】列表
4 規則集
選擇器 樣式選擇器{屬性名:屬性值;屬性名:屬性值}
5 註釋
/* 註釋內容 */
四 CSS常見的樣式屬性和值
1 CSS 尺寸屬性
(注意塊級元素和行內元素的區別)height 設置元素高度。
width 設置元素的寬度。
2 字體屬性
font-family字體族科
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新宋體 NSimSun
新細明體 PMingLiU
細明體 MingLiU
標楷體 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷體_GB2312 KaiTi_GB2312
font-size 字體大小
font-style 字體風格（normal 正常;italic 斜體;oblique 傾斜）
font-weight字體加粗（ normal 正常;bold 粗體;bolder 更粗;lighter 更細）
text-decoration 規定添加到文本的修飾 ：
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through定義穿過文本下的一條線。
blink 定義閃爍的文本。
3 顏色
color 設定文本的顏色
opacity 設置透明度（ 所有瀏覽器都支持 opacity 屬性）
注：IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。 一般兩個屬性一起寫，保證兼容性。 filter:Alpha(opacity=50); opacity:0.5;
4 背景
background-color:#CCC；設置元素的背景顏色。background-image ： 設置元素的背景圖像。屬性值url("1.png");
background-repeat ： 設置是否及如何重複背景圖像。repeat 默認。背景圖像將在垂直方向和水平方向重複。
repeat-x 背景圖像將在水平方向重複。
repeat-y 背景圖像將在垂直方向重複。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
background-attachment：設置背景圖像是否固定或者隨着頁面的其餘部分滾動。（屬性值：①fixed 固定 ②scroll 滾動）
橫向關鍵字： left center right
縱向關鍵字： top center bottom
百分比：左上角是 0% 0%。右下角是 100% 100%。
5 邊框屬性
border-style 設置4個邊框的樣式
dotted 定義點狀邊框。在大多數瀏覽器中呈現爲實線。
solid 定義實線。
double 定義雙線。
dashed 定義虛線。
none 定義無邊框
...
如果4個值都給定了，分別應用於上，右，下,左。如：border-style: solid dashed dashed solid;
如果給定1個值，應用於各邊; 如：border-style: solid;
如果給定2個值，第一個值應用於上下邊，第二個值應用於左右邊。如： border-style: solid dashed;
border-width 設置4個邊框的寬度
border-color 設置邊框顏色
border 在一個聲明設置所有的邊框屬性。如：order:1px solid #ff0000
6 鼠標光標屬性
cursor 屬性規定要顯示的光標的類型（形狀）。
none 無
auto 默認。瀏覽器設置的光標。
pointer 光標呈現爲指示鏈接的指針（一隻手）
wait 此光標指示程序正忙（通常是一隻表或沙漏）。
help 此光標指示可用的幫助（通常是一個問號或一個氣球）。
7 列表屬性
list-style-position 設置列表項標記的放置位置。
inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
在Firefox中的查看器中選中ul即可看出區別
list-style-type 設置列表項標記的類型。
none 無標記。
disc 默認。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。
ower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
list-style 在一個聲明中設置所有的列表屬性。如：list-style: square inside url('/i/eg_arrow.gif')
8 表格
優先級： td,th-->tr-->tbody,thead,tfoot-->table (從裏向外的規則)
color,font-size
text-align 文字對齊
background
border 邊框，只能用於table,th,td
margin 間距，只能用於table,caption
padding 內間距，只能用於th,td
width 寬，只能用於table,td,th
height 高，只能用於table,td,th、可以用於tr並且優先級高於td
caption-side 標題位置：top/left/right/botton
五 盒子模型
網頁就是由許多個盒子通過不同的排列方式堆積而成，網頁上每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內容，填充，邊框，邊界組成。默認盒子邊框無，背景色透明，默認看不到盒子1 盒子模型
margin 外邊距，定義區塊外邊界與上級元素距離的屬性，值爲長度padding 內邊距（填充），是設置區塊的內邊距的屬性，是邊框和元素內容之間的間隔距離
border 邊框(注意邊框是有內外倆條邊界的)
width 盒子的寬度
height 盒子的高度
內容 盒子裏面所包含的元素和內容
屬性值：
1個：上下左右都是該值
2個：前者表示上下的值，後者表示左右的值
3個：前者表示上邊的值，中間表示左右的值，後者表示下邊的值
4個：上右下左，順時針排序
2 不同瀏覽器解析盒子模型的差異
IE5盒子 width = 內容 + border + padding盒子佔據的寬度 = margin*2+width
盒子佔據的高度 = margin*2+height
盒子實際的寬度 = width
盒子實際的高度 = height
W3C盒子 width = 內容
盒子佔據的寬度 = margin*2+border*2+padding*2+width
盒子佔據的高度 = margin*2+border*2+padding*2+height
盒子實際的寬度 = border*2+padding*2+width
盒子實際的高度 = border*2+padding*2+height
3 設置瀏覽器去遵循w3c標準
只需要在網頁的頂部加上DOCTYPE聲明即可另外注意 !important 的使用
p{
color:red !important;
color:blue;
}
當不加!important;的時候，後者覆蓋前者，當加上之後說明第一個,樣式優先級更高，採用前者，但是Ie6不支持!important;
4 其他屬性
border-width 邊框高度border-color 邊框顏色
border-style 邊框樣式
none 無樣式
dotted 點線
dashed 虛線
solid 實線
double 雙線
groove 槽線
ridge 脊線
inset 內凹
outset 外凸
5 關於填充和邊框的常見問題
1. 大部分的html元素的盒子屬性（margin,padding）默認值爲0，有少數html元素的（marigin，padding不爲0）例如：body,p,ul,li,form等標籤，有時需要將其先設置爲02. 相鄰兩個兄弟元素的外邊框會發生合併，一般瀏覽器會自動設定他們的外邊距(注意我們可以margin設置爲負值)
3. 如果沒有設置父級元素的內邊距或邊框，那麼它的子元素的邊界會和其合併。(注意邊框是有內外倆條邊界的)
4. 設置一個塊元素居中： marigin:0 auto; （ 第一個表示top和bottom，第二個表示left和right）
5. margin可以設置負值，padding不可以設置
6. 行內元素的margin值，只有左右值，沒有上下值
6 行內元素與塊級元素
行內元素行內元素不可以設置寬（width）和高（height【但是可以通過line-height設置】），但可以與其他行內元素位於同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字體大小決定，寬度由內容的長度控制。常見的行內元素有:em,font,b,span,a,strong
塊級元素
塊級元素排斥其他元素與其位於同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等
IE6/7及IE8混雜模式中(當IE瀏覽器識別不了DTD就會顯示成混雜模式)，text- align:center可以使塊級元素也居中對齊。其他瀏覽器中，text-align:center僅作用於行內內容上。
改變元素類型：
display
可以將一個行級元素轉換爲塊級元素，但是這種轉換並不能改變元素本質，轉換的只是CSS的盒子的外觀
需要轉換盒子類型的情況：
水平的列表菜單，不斷行的標題，隱藏元素
none 隱藏元素。不會被顯示，不佔空間
block 塊級元素。獨佔一行空間
inline 默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。
inline-block 兼有塊級和行級元素特性，在行內顯示但是可以設定寬高
list-item 此元素會作爲列表顯示。
table 此元素會作爲塊級表格來顯示（類似 <table>），表格前後帶有換行符。
inline-table 此元素會作爲內聯表格來顯示（類似 <table>），表格前後沒有換行符。
table-row-group 此元素會作爲一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group 此元素會作爲一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group 此元素會作爲一個或多個行的分組來顯示（類似 <tfoot>）。
table-row 此元素會作爲一個表格行顯示（類似 <tr>）。
table-column 此元素會作爲一個單元格列顯示（類似 <col>）
table-cell 此元素會作爲一個表格單元格顯示（類似 <td> 和 <th>）
table-caption 此元素會作爲一個表格標題顯示（類似 <caption>）
inherit 規定應該從父元素繼承 display 屬性的值。
float,position
應用了浮動和絕對定位的元素，變成了塊級元素，因此display屬性一般被忽略
如果元素應用了display:none，該元素（以及子元素）被隱藏起來，對其再使用float,position將不再有意義
六 浮動 float
任何元素都可以浮動，可以改變普通文檔流的排列方式，可以使得塊元素在同一行中排列，使我們的佈局更加方便，浮動是脫離文檔流的，也就是其他元素看不見這個浮動的元素。瀏覽器將窗體自上而下分成一行一行,並在每行中按從左至右的挨次排放元素,即爲文檔流。浮動何時停止？
1. 當遇到一個浮動元素後
2. 當遇到父級元素後
多個盒子都浮動後，就產生了塊級元素水平排列的效果。 多個浮動元素不會相互覆蓋。 若包含的容器太窄，無法容納水平排列的多個浮動元素，那麼最後的浮動盒子會向下移動，但如果浮動元素的高度不同，那麼它們向下移動時可能會被卡住。
float:
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
七 定位 position
定位屬性：相對定位 relative: 參照元素原來的位置進行移動，元素原來的空間位不變，元素在移動時會覆蓋其他元素。
固定定位 fixed: 將元素固定在窗口中的某個位置，絕對定位是相對於元素的，固定定位是相對於窗口的，會隨着窗口的一定而移動。在低版本IE中不支持該屬性
絕對定位 absolute:元素完全脫離文檔流，頁面中的其他元素視它不存在，絕對定位元素不會影響到其他元素。絕對定位是參照距離他最近的父級有定位屬性的元素，如果父級元素沒有定位屬性，則會參照文檔
默認定位 static：默認屬性，指定了元素按照常規的文檔流進行定位，靜態定位元素不允許使用top,left和類似其他屬性定位。position的值爲static爲非定位元素，爲其他值時候爲定位元素，因爲static元素不能自定義元素的位置，而其他可以
top: 層距離頁面頂點縱座標的距離
left: 層距離頁面定點橫座標的距離
text-align: 橫向排列 left right center
line-height:行高，內容都在行的中間，可以使用這個屬性設置內容垂直居中
z-index ： 第三個維度 ，值高的元素會覆蓋值低的元素。該屬性可以使得元素脫離文檔流，可能會覆蓋其他元素。
