盒子模型
所有HTML元素可以看作盒子欺矫，在CSS中纱新，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
不同部分的說明：
Margin(外邊距)?- 清除邊框外的區(qū)域穆趴，外邊距是透明的脸爱。
Border(邊框)?- 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距)?- 清除內(nèi)容周圍的區(qū)域未妹，內(nèi)邊距是透明的簿废。
Content(內(nèi)容)?- 盒子的內(nèi)容，顯示文本和圖像络它。
元素的寬度高度計算公式：
總元素的寬度 = 寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
總元素的高度 = 高度 + 頂部填充 + 底部填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距
邊框
CSS 邊框?qū)傩?/h3>
CSS邊框?qū)傩栽试S你指定一個元素邊框的樣式和顏色族檬。
邊框樣式
邊框樣式屬性指定要顯示什么樣的邊界。border-style屬性用來定義邊框的樣式
border-style 值:
none: 默認(rèn)無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框酪耕。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框导梆。效果取決于邊框的顏色值
ridge: 定義3D脊邊框。效果取決于邊框的顏色值
inset:定義一個3D的嵌入邊框迂烁。效果取決于邊框的顏色值
outset: 定義一個3D突出邊框看尼。 效果取決于邊框的顏色值
邊框?qū)挾?br>
您可以通過 border-width 屬性為邊框指定寬度。
注意:?"border-width" 屬性 如果單獨使用則不起作用盟步。要先使用 "border-style" 屬性來設(shè)置邊框藏斩。
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)却盘，或者使用 3 個關(guān)鍵字之一狰域，它們分別是 thick 、medium（默認(rèn)值） 和 thin黄橘。
邊框顏色
border-color屬性用于設(shè)置邊框的顏色兆览。可以設(shè)置的顏色：
1. name - 指定顏色的名稱塞关，如 "red"
2. RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
3. Hex - 指定16進(jìn)制值, 如 "#ff0000"
還可以設(shè)置邊框的顏色為"transparent"抬探。
注意：?border-color單獨使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式帆赢。
邊框-單獨設(shè)置各邊
在CSS中小压，可以指定不同的側(cè)面不同的邊框：
同等效果椰于，僅需一行代碼：? ?border-style:dotted solid;??
按照先水平后垂直的順序為四個邊框兩兩設(shè)置
border-style屬性可以有1-4個值：
border-style:dotted solid double dashed;
上邊框是 dotted
右邊框是 solid
底邊框是 double
左邊框是 dashed
border-style:dotted solid double;
上邊框是 dotted
左怠益、右邊框是 solid
底邊框是 double
border-style:dotted solid;
上、底邊框是 dotted
右瘾婿、左邊框是 solid
border-style:dotted;
四面邊框是 dotted
上面的例子用了border-style蜻牢。然而烤咧，它也可以和border-width 、 border-color一起使用
邊框-簡寫屬性
你也可以在一個屬性中設(shè)置邊框孩饼。在"border"屬性中設(shè)置：
CSS?輪廓（outline）
輪廓（outline）是繪制于元素周圍的一條線髓削，位于邊框邊緣的外圍，可起到突出元素的作用镀娶。
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度揪罕。
CSS?margin(外邊距)
CSS margin(外邊距)屬性定義元素周圍的空間。
margin 清除周圍的（外邊框）元素區(qū)域好啰。margin 沒有背景顏色轩娶，是完全透明的。
margin 可以單獨改變元素的上框往，下鳄抒，左，右邊距椰弊，也可以一次改變所有的屬性许溅。
Margin可以使用負(fù)值，重疊的內(nèi)容秉版。
Margin - 單邊外邊距屬性
在CSS中贤重，它可以指定不同的側(cè)面不同的邊距：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - 簡寫屬性
為了縮短代碼，有可能使用一個屬性中margin指定的所有邊距屬性清焕。這就是所謂的簡寫屬性并蝗。
所有邊距屬性的簡寫屬性是?margin?:
margin:100px 50px;（等同于上述代碼）
margin屬性可以有一到四個值。
margin:25px 50px 75px 100px;（上秸妥、右滚停、下、左）
上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px
margin:25px 50px 75px;（上粥惧、中键畴、下）
上邊距為25px
左右邊距為50px
下邊距為75px
margin:25px 50px;（水平、垂直）
上下邊距為25px
左右邊距為50px
margin:25px;
所有的4個邊距都是25px
CSS?padding（填充）
CSS padding（填充）是一個簡寫屬性影晓，定義元素邊框與元素內(nèi)容之間的空間镰吵，即上下左右的內(nèi)邊距。
padding（填充）
當(dāng)元素的 padding（填充）內(nèi)邊距被清除時挂签，所釋放的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>
單獨使用 padding 屬性可以改變上下左右的填充疤祭。
填充- 單邊內(nèi)邊距屬性
在CSS中，它可以指定不同的側(cè)面不同的填充：
實例
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
填充 - 簡寫屬性
為了縮短代碼饵婆，它可以在一個屬性中指定的所有填充屬性勺馆。
這就是所謂的簡寫屬性。所有的填充屬性的簡寫屬性是?padding?:
實例
padding:25px 50px;（效果同上圖）
Padding屬性，可以有一到四個值草穆。
??padding:25px 50px 75px 100px;
上填充為25px
右填充為50px
下填充為75px
左填充為100px
??padding:25px 50px 75px;
上填充為25px
左右填充為50px
下填充為75px
??padding:25px 50px;
上下填充為25px
左右填充為50px
??padding:25px;
所有的填充都是25px
CSS?分組?和?嵌套?選擇器
分組選擇器
在樣式表中有很多具有相同樣式的元素灌灾。
為了盡量減少代碼，你可以使用分組選擇器悲柱。
每個選擇器用逗號分隔锋喜。
在下面的例子中，我們對以上代碼使用分組選擇器：
h1,h2,p{ color:green;}（效果與上圖代碼相同）
嵌套選擇器
它可能適用于選擇器內(nèi)部的選擇器的樣式豌鸡。
在下面的例子設(shè)置了三個樣式：
p{ }: 為所有?p?元素指定一個樣式嘿般。
.marked{ }: 為所有?class="marked"?的元素指定一個樣式。
.marked p{ }: 為所有?class="marked"?元素內(nèi)的?p?元素指定一個樣式涯冠。
p.marked{ }: 為所有?class="marked"?的?p?元素指定一個樣式炉奴。
CSS?尺寸 (Dimension)
CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣蛇更，它允許你增加行間距瞻赶。
元素高度設(shè)置
CSS?Display(顯示)?與?Visibility（可見性）
display屬性設(shè)置一個元素應(yīng)如何顯示，visibility屬性指定一個元素應(yīng)可見還是隱藏派任。
隱藏元素 - display:none或visibility:hidden
隱藏一個元素可以通過把display屬性設(shè)置為"none"砸逊，或把visibility屬性設(shè)置為"hidden"。但是請注意吨瞎，這兩種方法會產(chǎn)生不同的結(jié)果痹兜。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間颤诀。也就是說字旭，該元素雖然被隱藏了，但仍然會影響布局崖叫。
display:none可以隱藏某個元素遗淳，且隱藏的元素不會占用任何空間。也就是說心傀，該元素不但被隱藏了屈暗，而且該元素原本占用的空間也會從頁面布局中消失。
CSS Display - 塊和內(nèi)聯(lián)元素
塊元素是一個元素脂男，占用了全部寬度养叛，在前后都是換行符。
塊元素的例子：
<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度宰翅，不強制換行弃甥。
內(nèi)聯(lián)元素的例子：
<span>
<a>
可以更改內(nèi)聯(lián)元素和塊元素，反之亦然汁讼，可以使頁面看起來是以一種特定的方式組合淆攻，并仍然遵循web標(biāo)準(zhǔn)阔墩。
下面的示例把列表項顯示為內(nèi)聯(lián)元素：
下面的示例把span元素作為塊元素：
CSS?Position(定位)
position 屬性指定了元素的定位類型。
position 屬性的五個值：
static? relative? ? fixed? ? absolute? ? sticky
元素可以使用的頂部瓶珊，底部啸箫，左側(cè)和右側(cè)屬性定位。然而伞芹，這些屬性無法工作忘苛，除非是先設(shè)定position屬性。他們也有不同的工作方式唱较，這取決于定位方法柑土。
Static 定位
HTML元素的默認(rèn)值，即沒有定位绊汹，元素出現(xiàn)在正常的流中。
靜態(tài)定位的元素不會受到top, bottom, left, right影響扮宠。
Fixed 定位
元素的位置相對于瀏覽器窗口是固定位置西乖。
即使窗口是滾動的它也不會移動（例如：瀏覽器窗口彈出廣告）
Relative 定位
相對定位元素的定位是相對其正常位置。
可以移動的相對定位元素的內(nèi)容和相互重疊的元素坛增，它原本所占的空間不會改變获雕。
相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊。
Absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素收捣，如果元素沒有已定位的父元素届案，那么它的位置相對于<html>整個頁面
Absolutely定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間罢艾。
Absolutely定位的元素和其他元素重疊楣颠。
重疊的元素
元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面咐蚯，或后面）
一個元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：
img { position:absolute; left:0px; top:0px; z-index:-1; }
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面童漩。
注意：?如果兩個定位元素重疊，沒有指定z - index春锋，最后定位在HTML代碼中的元素將被顯示在最前面矫膨。（后來居上）
所有的CSS定位屬性
"CSS" 列中的數(shù)字表示哪個CSS(CSS1 或者CSS2)版本定義了該屬性。
CSS Float（浮動）
CSS float 屬性定義元素在哪個方向浮動期奔，浮動元素會生成一個塊級框侧馅，直到該塊級框的外邊緣碰到包含框或者其他的浮動框為止。
CSS 的 Float（浮動）呐萌，會使元素向左或向右移動馁痴，其周圍的元素也會重新排列。
Float（浮動）搁胆，往往是用于圖像弥搞，但它在布局時一樣非常有用邮绿。
元素怎樣浮動
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動攀例。
一個浮動元素會盡量向左或向右移動船逮，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它粤铭。
浮動元素之前的元素將不會受到影響挖胃。
如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起梆惯，如果有空間的話酱鸭，它們將彼此相鄰
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列垛吗，為了避免這種情況凹髓，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素怯屉。
CSS?水平對齊(Horizontal Align)
關(guān)于 CSS 中元素的水平對齊(Horizontal?Align)蔚舀，你可以使用多種屬性來進(jìn)行設(shè)置
中心對齊,使用margin屬性
塊元素可以把左，右頁邊距設(shè)置為"自動"對齊锨络。
Note:?在IE8中使用margin:auto屬性無法正常工作赌躺，除非聲明?!DOCTYPE
margin屬性可任意拆分為左，右頁邊距設(shè)置自動指定羡儿，結(jié)果都是出現(xiàn)居中元素：
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
提示:?如果寬度是100％礼患，對齊是沒有效果的。
使用position屬性設(shè)置左掠归，右對齊
元素對齊的方法之一是使用絕對定位：
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
注意：絕對定位與文檔流無關(guān)缅叠，所以它們可以覆蓋頁面上的其它元素
使用float屬性設(shè)置左，右對齊
使用float屬性是對齊元素的方法之一：
.right { float:right; width:300px; background-color:#b0e0e6; }
使用Padding設(shè)置垂直居中對齊
CSS 中一個簡單的設(shè)置垂直居中對齊的方式就是頭部頂部使用?padding:
.center { padding: 70px 0;? border: 3px solid green; }
如果要水平和垂直都居中拂到，可以使用?padding?和?text-align: center:
.center {? padding: 70px 0;? border: 3px solid green;? text-align: center; }
CSS 組合選擇符
組合選擇符說明了兩個選擇器直接的關(guān)系痪署。
CSS組合選擇符包括各種簡單選擇符的組合方式。
在 CSS3 中包含了四種組合方式:
后代選取器(以空格分隔)
子元素選擇器(以大于號分隔）
相鄰兄弟選擇器（以加號分隔）
普通兄弟選擇器（以波浪號分隔）
后代選取器
后代選取器匹配所有指定元素的后代元素兄旬。
以下實例選取所有 <p> 元素插入到 <div> 元素中:
子元素選擇器
與后代選擇器相比狼犯，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。
以下實例選擇了<div>元素中所有直接子元素 <p> ：
相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的一個元素领铐，且二者有相同父元素悯森。
如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素绪撵，可以使用相鄰兄弟選擇器（Adjacent sibling selector）瓢姻。
以下實例選取了所有位于 <div> 元素后的第一個 <p> 元素:
生效的是相鄰兄弟選擇器，不包含該選擇器本身
普通相鄰兄弟選擇器
普通兄弟選擇器選取所有指定元素的相鄰兄弟元素音诈。
以下實例選取了所有 <div> 元素之后的所有相鄰兄弟元素 <p> :?
CSS?偽類(Pseudo-classes)
CSS偽類是用來添加一些選擇器的特殊效果幻碱。
由于狀態(tài)的變化是非靜態(tài)的绎狭，所以元素達(dá)到一個特定狀態(tài)時，它可能得到一個偽類的樣式褥傍；當(dāng)狀態(tài)改變時儡嘶，它又會失去這個樣式。由此可以看出恍风，它的功能和class有些類似蹦狂，但它是基于文檔之外的抽象，所以叫偽類朋贬。
語法
偽類的語法：
selector:pseudo-class {property:value;}
CSS類也可以使用偽類：
selector.class:pseudo-class {property:value;}
anchor偽類
在支持 CSS 的瀏覽器中凯楔，鏈接的不同狀態(tài)都可以以不同的方式顯示
偽類和CSS類
偽類可以與 CSS 類配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
如果在上面的例子的鏈接已被訪問，它會顯示為紅色锦募。
CSS - :first - child偽類
您可以使用 :first-child 偽類來選擇元素的第一個子元素
匹配第一個 <p> 元素
在下面的例子中摆屯，選擇器匹配作為任何元素的第一個子元素的 <p> 元素：
匹配所有<p> 元素中的第一個 <i> 元素
在下面的例子中，選擇相匹配的所有<p>元素的第一個 <i>元素：（所有p中的第一個i）
匹配所有作為第一個子元素的<p> 元素中的所有 <i> 元素
在下面的例子中糠亩，選擇器匹配所有作為元素的第一個子元素的<p> 元素中的所有 <i> 元素：(第一個p中的所有i)
CSS - :lang 偽類
:lang 偽類使你有能力為不同的語言定義特殊的規(guī)則
注意：IE8必須聲明<!DOCTYPE>才能支持;lang偽類鸥拧。
在下面的例子中，:lang 類為屬性值為 no 的q元素定義引號的類型：
所有CSS偽類/元素
