樣式選擇器
- 標(biāo)簽選擇器
- 類選擇器：
. - ID選擇器：
# - 子（后代）選擇器：
>空格 - 通用選擇器：
*匹配所有html標(biāo)簽 - 屬性選擇器：
[att=val]，如#id{}等價(jià)于id=idName{}和.className{}等價(jià)于class~=className{}，都是特例。
[att^=val]:以val開頭；[att$=val]:以val結(jié)尾；[att*=val]:包含val... - 偽類選擇器：給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式。
a:link{color: gray;} //鏈接
a:visited{color: red;} //已訪問
a:hover{color: green;} //鼠標(biāo)懸停
a:active{color: orange;} //選中時(shí)```
- [偽元素選擇器](http://www.runoob.com/css/css-pseudo-elements.html)：
- *類選擇器和ID選擇器的區(qū)別：*
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
- *子選擇器和包含選擇器的區(qū)別：*
子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。包含選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇。
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
- 當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)，可以使用分組選擇符（，），如下代碼為右側(cè)代碼編輯器中的h1、span標(biāo)簽同時(shí)設(shè)置字體顏色為紅色：
`h1,span{color:red;}`它相當(dāng)于下面兩行代碼：`h1{color:red;}span{color:red;}`
- *權(quán)值*
標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。例如下面的代碼：
p{color:red;} /權(quán)值為1/
p span{color:green;} /權(quán)值為1+1=2/
.warning{color:white;} /權(quán)值為10/
p span.warning{color:purple;} /權(quán)值為1+1+10=12/
footer .note p{color:yellow;} /權(quán)值為100+10+1=111/```
注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。
格式化排版
元素分類
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>
將塊狀元素轉(zhuǎn)換為內(nèi)聯(lián)元素：{display:inline;}
將內(nèi)聯(lián)元素轉(zhuǎn)換為塊狀元素：{display:block;}
轉(zhuǎn)換為inline-block元素：{display:inline-block;}
塊狀元素（block）
特點(diǎn)：
1、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。內(nèi)聯(lián)元素（行內(nèi)元素，inline）
特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。內(nèi)聯(lián)塊狀元素（inline-block）
同時(shí)具備內(nèi)聯(lián)元素和塊狀元素的特點(diǎn)。
特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
盒模型
- 邊框（border）
屬性：粗細(xì)，樣式，顏色。
border-width:2px;（thin細(xì) | medium中 | thick粗（但不是很常用），最常還是用像素（px））
border-style:solid;（dashed虛線，dotted點(diǎn)線，solid實(shí)線）
border-color:red;（十六進(jìn)制顏色，#888）
單獨(dú)設(shè)置邊框
div{
border-bottom 底:1px solid red;
border-top 上:1px solid red;
border-right 右:1px solid red;
border-left 左:1px solid red;
}```
- 填充（padding）
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時(shí)針)。
- 邊界（margin）
元素與其它元素之間的距離可以使用邊界來設(shè)置。邊界也是可分為上、右、下、左。
*padding在邊框里，margin在邊框外。*
### 布局模型
- 流動(dòng)模型（flow）
默認(rèn)的網(wǎng)頁(yè)布局模型
1、塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。
2、在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
- 浮動(dòng)模型（float）
默認(rèn)寬度為內(nèi)容寬度，半脫離文檔流（對(duì)元素，脫離文檔流；對(duì)內(nèi)容，在文檔流）
.clearfix:after{ //清除float元素，clear屬性指定段落的左側(cè)或右側(cè)不允許浮動(dòng)的元素。
content: 0;
display: block;
clear: both;
height: 0px;
overflow: hidden;
visibility: hidden;
}```
- 層模型（layer）
CSS定義了一組定位（positioning）屬性來支持層布局模型。
1、絕對(duì)定位(position: absolute)
絕對(duì)于其父元素（或）位置，默認(rèn)寬度為內(nèi)容寬度，脫離文檔流，參照物為第一個(gè)定位祖先或者根元素。
2、相對(duì)定位(position: relative)
相對(duì)于其原來的位置
3、固定定位(position: fixed)
參照物為視窗 - 彈性布局（flax）
