# CSS樣式規(guī)則?overflow
使用HTML時(shí)，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對網(wǎng)頁進(jìn)行修飾非竿，首先需要了解CSS樣式規(guī)則，具體格式如下：? ? ? ? ? ?
在上面的樣式規(guī)則中:
1.選擇器用于指定CSS樣式作用的HTML對象谋竖，花括號內(nèi)是對該對象設(shè)置的具體樣式红柱。
2.屬性和屬性值以“鍵值對”的形式出現(xiàn)承匣。
3.屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小锤悄、文本顏色等韧骗。
4.屬性和屬性值之間用英文“:”連接。
5.多個(gè)“鍵值對”之間用英文“;”進(jìn)行區(qū)分铁蹈。# CSS字體樣式屬性
# CSS字體樣式屬性
## font-size:字號大小
font-size屬性用于設(shè)置字號宽闲，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位握牧。其中容诬，相對長度單位比較常用，推薦使用像素單位px沿腰，絕對長度單位使用較少
## font-family:字體
font-family屬性用于設(shè)置字體览徒。網(wǎng)頁中常用的字體有宋體、微軟雅黑颂龙、黑體等习蓬，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：
p{ font-family:"微軟雅黑";}
可以同時(shí)指定多個(gè)字體措嵌，中間以逗號隔開躲叼，表示如果瀏覽器不支持第一個(gè)字體，則會嘗試下一個(gè)企巢，直到找到合適的字體枫慷。
1. 現(xiàn)在網(wǎng)頁中普遍使用14px+。
2. 盡量使用偶數(shù)的數(shù)字字號浪规。ie6等老式瀏覽器支持奇數(shù)會有bug或听。
3. 各種字體之間必須使用英文狀態(tài)下的逗號隔開。
4. 中文字體需要加英文狀態(tài)下的引號笋婿，英文字體一般不需要加引號誉裆。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前缸濒。
5. 如果字體名中包含空格足丢、#、$等符號庇配，則該字體必須加英文狀態(tài)下的單引號或雙引號斩跌，例如font-family: "Times New Roman";。
6. 盡量使用系統(tǒng)默認(rèn)字體讨永，保證在任何用戶的瀏覽器中都能正確顯示滔驶。
## font-weight:字體粗細(xì)
字體加粗除了用 b? 和 strong 標(biāo)簽之外橱夭，可以使用CSS 來實(shí)現(xiàn)铣缠，但是CSS 是沒有語義的。
font-weight屬性用于定義字體的粗細(xì)屎即，其可用屬性值：normal锻霎、bold著角、bolder、lighter旋恼、100~900（100的整數(shù)倍）吏口。
數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold冰更。? 但是我們更喜歡用數(shù)字來表示产徊。?
## font-style:字體風(fēng)格
字體傾斜除了用 i? 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)蜀细，但是CSS 是沒有語義的舟铜。
font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體奠衔、傾斜或正常字體谆刨，其可用屬性值如下：
normal：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式归斤。
italic：瀏覽器會顯示斜體的字體樣式痊夭。
oblique：瀏覽器會顯示傾斜的字體樣式。
## font:綜合設(shè)置字體樣式 (重點(diǎn))
font屬性用于對字體樣式進(jìn)行綜合設(shè)置脏里，其基本語法格式如下：
選擇器{font: font-style? font-weight? font-size/line-height? font-family;}
使用font屬性時(shí)她我，必須按上面語法格式中的順序書寫，不能更換順序膝宁，各個(gè)屬性以空格隔開鸦难。
注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性员淫，否則font屬性將不起作用合蔽。
## id選擇器和類選擇器區(qū)別
W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁面內(nèi)介返，不允許有相同名字的id對象出現(xiàn)拴事，但是允許相同名字的class。
類選擇器（class） 好比人的名字圣蝎，? 是可以多次重復(fù)使用的刃宵， 比如? 張偉? 王偉? 李偉? 李娜
id選擇器? ? 好比人的身份證號碼，? 全中國是唯一的徘公， 不得重復(fù)牲证。 只能使用一次。
***id選擇器和類選擇器最大的不同在于 使用次數(shù)上关面。***
## 通配符選擇器
通配符選擇器用“*”號表示坦袍，他是所有選擇器中作用范圍最廣的十厢，能匹配頁面中所有的元素。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面的代碼捂齐，使用通配符選擇器定義CSS樣式蛮放，清除所有HTML標(biāo)記的默認(rèn)邊距。
* {
? margin: 0;? ? ? ? ? ? ? ? ? ? /* 定義外邊距*/
? padding: 0;? ? ? ? ? ? ? ? ? /* 定義內(nèi)邊距*/
}
注意：
? 這個(gè)通配符選擇器奠宜，就像我們的電影明星中的夢中情人包颁， 想想它就好了，但是它不會和你過日子压真。?
## 偽類選擇器
? 偽類選擇器用于向某些選擇器添加特殊的效果娩嚼。比如給鏈接添加特殊效果， 比如可以選擇 第1個(gè)滴肿，第n個(gè)元素待锈。
為了和我們剛才學(xué)的類選擇器相區(qū)別，? 類選擇器是一個(gè)點(diǎn) 比如 .demo {}? 而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號? 比如? :link{}
### 鏈接偽類選擇器
-:link? ? ? /* 未訪問的鏈接 */
-:visited? /* 已訪問的鏈接 */
-:hover? ? /* 鼠標(biāo)移動到鏈接上 */
-:active? ? /* 選定的鏈接 */
?? 注意寫的時(shí)候嘴高，他們的順序盡量不要顛倒? 按照? lvha 的順序竿音。 ?
a {? /* a是標(biāo)簽選擇器? 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover {? /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
color: red; /*? 鼠標(biāo)經(jīng)過的時(shí)候，由原來的 灰色 變成了紅色 */
}
### 結(jié)構(gòu)(位置)偽類選擇器（CSS3)
-:first-child :選取屬于其父元素的首個(gè)子元素的指定選擇器
-:last-child :選取屬于其父元素的最后一個(gè)子元素的指定選擇器
-:nth-child(n) ： 匹配屬于其父元素的第 N 個(gè)子元素拴驮，不論元素的類型
-:nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素春瞬，不論元素的類型，從最后一個(gè)子元素開始計(jì)數(shù)套啤。
? n 可以是數(shù)字宽气、關(guān)鍵詞或公式
~~~css
li:first-child { /*? 選擇第一個(gè)孩子 */
color: pink;?
}
li:last-child {? /* 最后一個(gè)孩子 */
color: purple;
}
li:nth-child(4) {? /* 選擇第4個(gè)孩子? n? 代表 第幾個(gè)的意思 */?
color: skyblue;
}
~~~
### 目標(biāo)偽類選擇器(CSS3)
?:target目標(biāo)偽類選擇器 :選擇器可用于選取當(dāng)前活動的目標(biāo)元素
~~~css
:target {
color: red;
font-size: 30px;
}
~~
# CSS外觀屬性
## color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
1.預(yù)定義的顏色值潜沦，如red萄涯，green，blue等唆鸡。
2.十六進(jìn)制涝影，如#FF0000，#FF6600争占，#29D794等燃逻。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式臂痕。
3.RGB代碼伯襟，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是握童，如果使用RGB代碼的百分比顏色值姆怪，取值為0時(shí)也不能省略百分號，必須寫為0%。
##? line-height:行間距
line-height屬性用于設(shè)置行間距稽揭，就是行與行之間的距離红伦，即字符的垂直間距，一般稱為行高淀衣。line-height常用的屬性值單位有三種，分別為像素px召调，相對值em和百分比%膨桥，實(shí)際工作中使用最多的是像素px
一般情況下，行距比字號大7.8像素左右就可以了唠叛。
## text-align:水平對齊方式
~~~
text-align屬性用于設(shè)置文本內(nèi)容的水平對齊只嚣，相當(dāng)于html中的align對齊屬性。其可用屬性值如下：
~~~
left：左對齊（默認(rèn)值）
right：右對齊
center：居中對齊
## text-indent:首行縮進(jìn)
text-indent屬性用于設(shè)置首行文本的縮進(jìn)艺沼，其屬性值可為不同單位的數(shù)值册舞、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%障般，允許使用負(fù)值, 建議使用em作為設(shè)置單位调鲸。
1em 就是一個(gè)字的寬度? 如果是漢字的段落， 1em 就是一個(gè)漢字的寬度
## letter-spacing:字間距
letter-spacing屬性用于定義字間距挽荡，所謂字間距就是字符與字符之間的空白藐石。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值定拟，默認(rèn)為normal于微。
## word-spacing:單詞間距
word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效青自。和letter-spacing一樣株依，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值延窜，默認(rèn)為normal恋腕。
word-spacing和letter-spacing均可對英文進(jìn)行設(shè)置。不同的是letter-spacing定義的為字母之間的間距逆瑞，而word-spacing定義的為英文單詞之間的間距吗坚。
## 顏色半透明(css3)
文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下：
~~~css
? ? color: rgba(r,g,b,a)? a 是alpha? 透明的意思? 取值范圍 0~1之間? ? color: rgba(0,0,0,0.3)?
~~~
## 文字陰影(CSS3)
以后我們可以給我們的文字添加陰影效果了? Shadow? 影子?
~~~css
text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;
~~~
# 引入CSS樣式表（書寫位置）
CSS可以寫到那個(gè)位置？ 是不是一定寫到html文件里面呢呆万？
## 行內(nèi)式（內(nèi)聯(lián)樣式）
是通過標(biāo)簽的style屬性來設(shè)置元素的樣式商源，其基本語法格式如下：
```
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
```
語法中style是標(biāo)簽的屬性，實(shí)際上任何HTML標(biāo)簽都擁有style屬性谋减，用來設(shè)置行內(nèi)式牡彻。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。
## 內(nèi)部樣式表（內(nèi)嵌式）
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中庄吼，并且用style標(biāo)簽定義缎除，其基本語法格式如下：
```html
<head>
<style type="text/CSS">
? ? 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
```
語法中，style標(biāo)簽一般位于head標(biāo)簽中title標(biāo)簽之后总寻，也可以把他放在HTML文檔的任何地方器罐。
## 外部樣式表（外鏈?zhǔn)剑?/p>
鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中渐行，其基本語法格式如下：
```html
<head>
? ? ? ? ? ?<link href="CSS文件的路徑" type="text/CSS" rel="stylesheet" />
</head>
```
注意：? link 是個(gè)單標(biāo)簽哦!!!
該語法中轰坊，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性祟印，具體如下：
~~~
href：定義所鏈接外部樣式表文件的URL肴沫，可以是相對路徑，也可以是絕對路徑蕴忆。
type：定義所鏈接文檔的類型颤芬，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表套鹅。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系站蝠，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件卓鹿。
~~~
## 三種樣式表總結(jié)
| 樣式表? | 優(yōu)點(diǎn)? ? ? ? ? | 缺點(diǎn)? ? ? ? ? | 使用情況? ? | 控制范圍? ? ? |
| ----- | ------------ | ------------ | ------- | --------- |
| 行內(nèi)樣式表 | 書寫方便沉衣，權(quán)重高? ? | 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少? ? ? | 控制一個(gè)標(biāo)簽（少） |
| 內(nèi)嵌樣式表 | 部分結(jié)構(gòu)和樣式相分離? | 沒有徹底分離? ? ? | 較多? ? ? | 控制一個(gè)頁面（中） |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入? ? ? ? | 最多，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
## 塊級元素(block-level)
每個(gè)塊元素通常都會獨(dú)自占據(jù)一整行或多整行减牺，可以對其設(shè)置寬度豌习、高度、對齊等屬性拔疚，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建肥隆。
```
常見的塊元素有<h1>~<h6>、<p>稚失、<div>栋艳、<ul>、<ol>句各、<li>等吸占，其中<div>標(biāo)簽是最典型的塊元素。
```
塊級元素的特點(diǎn)：
（1）總是從新行開始
（2）高度凿宾，行高矾屯、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素初厚。
## 行內(nèi)元素(inline-level)
行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域件蚕，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度排作、對齊等屬性牵啦，常用于控制頁面中文本的樣式。
```
常見的行內(nèi)元素有<a>妄痪、<strong>哈雏、<b>、<em>衫生、<i>裳瘪、<del>、<s>障簿、<ins>、<u>栅迄、<span>等站故，其中<span>標(biāo)簽最典型的行內(nèi)元素。
行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上毅舆。
（2）高西篓、寬無效，但水平方向的padding和margin可以設(shè)置憋活，垂直方向的無效岂津。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素悦即。（a特殊吮成，<a href = "#"><div></div></a>）
? ?注意：
1.只有 文字才 能組成段落? 因此 p? 里面不能放塊級元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt辜梳，他們都是文字類塊級標(biāo)簽粱甫，里面不能放其他塊級元素。
2.鏈接里面不能再放鏈接作瞄。
## 行內(nèi)塊元素（inline-block）
```
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />茶宵、<input />、<td>宗挥，可以對它們設(shè)置寬高和對齊屬性乌庶，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙契耿。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度瞒大。
（3）高度，行高搪桂、外邊距以及內(nèi)邊距都可以控制糠赦。
```
##?標(biāo)簽顯示模式轉(zhuǎn)換(display)
塊轉(zhuǎn)行內(nèi)：display:inline;
行內(nèi)轉(zhuǎn)塊：display:block;
塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊：display:inline-block;
# CSS復(fù)合選擇器
復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽拙泽。
## 交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成淌山，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器顾瞻，兩個(gè)選擇器之間不能有空格泼疑，如h3.special。
<strong>記憶技巧：</strong>
交集選擇器 是 并且的意思荷荤。? 即...又...的意思
~~~
比如：? p.one? 選擇的是： 類名為 .one? 的 段落標(biāo)簽退渗。?
~~~
用的相對來說比較少，不太建議使用蕴纳。
## 并集選擇器
并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過<strong style="color:#f00">逗號</strong>連接而成的会油，任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等）古毛，都可以作為并集選擇器的一部分翻翩。如果某些選擇器定義的樣式完全相同，或部分相同稻薇，就可以利用并集選擇器為它們定義相同的CSS樣式嫂冻。
記憶技巧：
并集選擇器? 和 的意思，? 就是說塞椎，只要逗號隔開的桨仿，所有選擇器都會執(zhí)行后面樣式。
~~~
比如? .one, p , #test {color: #F00;}? 表示? .one 和 p? 和 #test 這三個(gè)選擇器都會執(zhí)行顏色為紅色案狠。? 通常用于集體聲明服傍。
~~~
## 后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代骂铁，其寫法就是把外層標(biāo)簽寫在前面伴嗡，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔从铲。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)瘪校，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
## 子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素伸辟。其寫法就是把父級標(biāo)簽寫在前面败砂，子級標(biāo)簽寫在后面瘤载，中間跟一個(gè) > 進(jìn)行連接茉贡，注意，符號左右兩側(cè)各保留一個(gè)空格卡啰。
白話：? 這里的子 指的是 親兒子? 不包含孫子 重孫子之類。
~~~
?比如：? .demo > h3 {color: red;}? 說明? h3 一定是demo 親兒子警没。? demo 元素包含著h3匈辱。
~~~
## 屬性選擇器
|**選擇器? ? ? ? ? ? ? ? |**示例 | **含義? ? ? ? ? ? ? ? |
| --------------------- | ---- | -------------------- |
| **E[attr]******? ? ? |? ? ? | 存在attr屬性即可? ? ? ? ? |
| **E[attr=val]******? |? ? ? | 屬性值完全等于val? ? ? ? ? |
|**E[attr*=val]****** |? ? ? | 屬性值里包含val字符并且在“任意”位置 |
|**E[attr^=val]******? |? ? ? | 屬性值里包含val字符并且在“開始”位置 |
|**E[attr$=val]******? |? ? ? | 屬性值里包含val字符并且在“結(jié)束”位置 |
~~~css
/* 獲取到 擁有 該屬性的元素 */
li[type] {
? border: 1px solid gray;
}
/* 獲取 屬性等于某個(gè)值的 元素 屬性值 可以使用 引號進(jìn)行包裹 */
li[type="vegetable"] {
? background-color: green;
}
/* 選擇標(biāo)題屬性包含單詞"hot"的所有元素 */
li[type~="hot"] {
? font-size: 40px;
}
/* 獲取以某個(gè)屬性開頭的語法? */
li[color^='green'] {
? background-color: orange;
}
/* 獲取以某個(gè)值 結(jié)尾的屬性 */
li[type$='t']{
? color: hotpink;
? font-weight: 900;
}
/* 獲取 屬性中 擁有某個(gè)值的 元素 */
li[type*=ea] {
? font-size: 100px;
}
/* 屬性price?以 very 為開頭的所有元素 */
li[price|='very'] {
? background-color: darkred;
}
~~~
<ul>
? ? <li type='fruit' color='green'>西瓜</li>
? ? <li type='vegetable' color='greenyellow'>西蘭花</li>
? ? <li type='meat'>牛肉</li>
? ? <li type='meat hot'>豬肉</li>
? ? <li type='drink hot'>可樂</li>
? ? <li type='drink hot'>雪碧</li>
? ? <li price='very-cheap'>紅酒</li>
? ? <li price='very'>白酒</li>
</ul>
### 偽元素選擇器（CSS3)
1.E::first-letter文本的第一個(gè)單詞或字（如中文、日文杀迹、韓文等）
2.E::first-line 文本第一行亡脸；
3.E::selection 可改變選中文本的樣式；
~~~css
p::first-letter {
? font-size: 20px;
? color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
? color: skyblue;
}
p::selection {
? /* font-size: 50px; */
? color: orange;
}
~~~
4树酪、E::before和E::after
在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個(gè)元素浅碾，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用续语。
~~~css
div::befor {
? content:"開始";
}
div::after {
? content:"結(jié)束";
}
~~~
E:after垂谢、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類疮茄，“::”用來表示偽元素滥朱，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after娃豹、E::before焚虱，這樣做的目的是用來做兼容處理购裙。
E:after懂版、E:before后面的練習(xí)中會反復(fù)用到，目前只需要有個(gè)大致了解
":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素
# CSS 背景(background)
CSS 可以添加背景顏色和背景圖片躏率，以及來進(jìn)行圖片設(shè)置躯畴。
| background-color? ? ? ? ? ? ? ? ? ? ? | 背景顏色? ? |
| ------------------------------------- | -------- |
| background-image? ? ? ? ? ? ? ? ? ? ? | 背景圖片地址? |
| background-repeat? ? ? ? ? ? ? ? ? ? | 是否平鋪? ? |
| background-position? ? ? ? ? ? ? ? ? | 背景位置? ? |
| background-attachment? ? ? ? ? ? ? ? | 背景固定還是滾動 |
| 背景的合寫（復(fù)合屬性）? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? ? |
| background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 |? ? ? ? ? |
## 背景圖片(image)
語法：?
~~~css
background-image : none | url (url)?
~~~
參數(shù)：?
none : 無背景圖（默認(rèn)的）
url : 使用絕對或相對地址指定背景圖像?
background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話薇芝，圖片覆蓋不到地地方都會被背景色填充蓬抄。 如果有背景圖片平鋪，則會覆蓋背景顏色夯到。
小技巧：? 我們提倡 背景圖片后面的地址嚷缭，url不要加引號。
## 背景平鋪（repeat）
語法：?
~~~css
background-repeat : repeat | no-repeat | repeat-x | repeat-y?
~~~
參數(shù)：?
repeat : 背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪?
設(shè)置背景圖片時(shí)耍贾，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素阅爽。
repeat-x : 背景圖像在橫向上平鋪?
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素荐开。
## 背景位置(position)
語法：?
~~~css
background-position : length || length
background-position : position || position?
~~~
參數(shù)：?
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識符組成的長度值付翁。請參閱長度單位?
position : top | center | bottom | left | center | right?
說明：?
設(shè)置或檢索對象的背景圖像位置。必須先指定background-image屬性晃听。默認(rèn)值為：(0% 0%)百侧。
如果只指定了一個(gè)值砰识，該值將用于橫坐標(biāo)∮犊剩縱坐標(biāo)將默認(rèn)為50%辫狼。第二個(gè)值將用于縱坐標(biāo)。
注意：
1.position 后面是x坐標(biāo)和y坐標(biāo)观话。 可以使用方位名詞或者 精確單位予借。
2.如果和精確單位和方位名字混合使用，則必須是x坐標(biāo)在前频蛔，y坐標(biāo)后面灵迫。比如 background-position: 15px top;? 則 15px 一定是? x坐標(biāo)? top是 y坐標(biāo)。
實(shí)際工作用的最多的晦溪，就是背景圖片居中對齊了瀑粥。
## 背景附著
語法：?
~~~css
background-attachment : scroll | fixed?
~~~
參數(shù)：?
scroll : 背景圖像是隨對象內(nèi)容滾動
fixed : 背景圖像固定?
說明：?
設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動還是固定的。
## 背景簡寫
background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的三圆。為了可讀性狞换，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
~~~css
background: transparent url(image.jpg) repeat-y? scroll 50% 0 ;
~~~
## 背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
~~~css
background: rgba(0,0,0,0.3);
~~~
?最后一個(gè)參數(shù)是alpha 透明度? 取值范圍 0~1之間
?注意：? 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響舟肉。
同樣修噪， 可以給 文字和邊框透明? 都是 rgba 的格式來寫。
~~~css
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
~~~
## 背景縮放(CSS3)
通過background-size設(shè)置背景圖片的尺寸路媚，就像我們設(shè)置img的尺寸一樣黄琼，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛。
其參數(shù)設(shè)置如下：
a) 可以設(shè)置長度單位(px)或百分比（設(shè)置百分比時(shí)整慎，參照盒子的寬高）
b) 設(shè)置為cover時(shí)脏款，會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域裤园，如有溢出部分則會被隱藏撤师。
c) 設(shè)置為contain會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域拧揽。
~~~css
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
~~~
## 多背景(CSS3)
~~~css
background-image: url('images/gyt.jpg'),url('images/robot.png');
div {
? ? background:url('images/gyt.jpg') no-repeat left top,?
? ??url('images/robot.png') no-repeat right bottom red;
}
~~~
## 凹凸文字
##文本的裝飾
text-decoration 通常我們用于給鏈接修改裝飾效果
技巧：在一行內(nèi)的盒子內(nèi)剃盾，我們設(shè)定行高等于盒子的高度，就可以使文字垂直居中淤袜。
# CSS 三大特性
層疊 繼承? 優(yōu)先級 是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性痒谴。
## CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過兩個(gè)選擇器設(shè)置到同一個(gè)元素上饮怯，那么這個(gè)時(shí)候一個(gè)屬性就會將另一個(gè)屬性層疊掉
比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色闰歪，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況蓖墅，這就是樣式?jīng)_突库倘。
一般情況下临扮，如果出現(xiàn)樣式?jīng)_突，則會按照CSS書寫的順序教翩，以最后的樣式為準(zhǔn)杆勇。
##? CSS繼承性
所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會繼承父標(biāo)簽的某些樣式饱亿，如文本顏色和字號蚜退。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可彪笼。
注意：
~~~
恰當(dāng)?shù)厥褂美^承可以簡化代碼钻注，降低CSS樣式的復(fù)雜性。但是如果網(wǎng)頁中所有的元素都大量繼承樣式配猫，那么判斷樣式的來源就會很困難幅恋，所以對于字體、文本屬性等網(wǎng)頁中的通用樣式可以使用繼承泵肄。例如字體捆交、字號、顏色腐巢、行距等可以在body元素中統(tǒng)一設(shè)置品追，然后通過繼承影響文檔中的所有文本。
并不是所有的css屬性都可以繼承冯丙，例如肉瓦，下面的屬性就不具有繼承性：邊框、內(nèi)邊距银还、外邊距风宁、背景洁墙、定位蛹疯、元素高屬性。
~~
## CSS優(yōu)先級
定義CSS樣式時(shí)热监，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上捺弦，這時(shí)就會出現(xiàn)優(yōu)先級的問題。
在考慮權(quán)重時(shí)孝扛，初學(xué)者還需要注意一些特殊的情況列吼，具體如下：
~~~
繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中苦始，不管父元素樣式的權(quán)重多大寞钥，被子元素繼承時(shí)，他的權(quán)重都為0陌选，也就是說子元素定義的樣式會覆蓋繼承來的樣式理郑。
行內(nèi)樣式優(yōu)先蹄溉。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高您炉，可以理解為遠(yuǎn)大于100柒爵。總之赚爵，他擁有比上面提高的選擇器都大的優(yōu)先級棉胀。
權(quán)重相同時(shí)，CSS遵循就近原則冀膝。也就是說靠近元素的樣式具有最大的優(yōu)先級唁奢，或者說排在最后的樣式優(yōu)先級最大。
CSS定義了一個(gè)!important命令窝剖，該命令被賦予最大的優(yōu)先級驮瞧。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級枯芬。
~~~
## CSS特殊性（Specificity）
關(guān)于CSS權(quán)重论笔，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity千所，我們稱為CSS 特性或稱非凡性狂魔，它是一個(gè)衡量CSS值優(yōu)先級的一個(gè)標(biāo)準(zhǔn) 具體規(guī)范入如下：
specificity用一個(gè)四位的數(shù) 字串(CSS2是三位)來表示，更像四個(gè)級別淫痰，值從左到右最楷，左面的最大，一級大于一級待错，數(shù)位之間沒有進(jìn)制籽孙，級別之間不可超越。?
| 繼承或者* 的貢獻(xiàn)值? ? ? | 0,0,0,0 |
| --------------- | ------- |
| 每個(gè)元素（標(biāo)簽）貢獻(xiàn)值為? ? | 0,0,0,1 |
| 每個(gè)類火俄，偽類貢獻(xiàn)值為? ? ? | 0,0,1,0 |
| 每個(gè)ID貢獻(xiàn)值為? ? ? ? | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式貢獻(xiàn)值? ? ? | 1,0,0,0 |
| 每個(gè)!important貢獻(xiàn)值 | ∞ 無窮大? |
權(quán)重是可以疊加的：
?~~~
div ul? li? ------>? ? ? 0,0,0,3
.nav ul li? ------>? ? ? 0,0,1,2
a:hover? ? ? -----—>? ? ? 0,0,1,1
.nav a? ? ? ------>? ? ? 0,0,1,1? ?
#nav p? ? ? ----->? ? ? 0,1,0,1
?~~~
?注意： 數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0犯建， 所以不會存在10個(gè)div能趕上一個(gè)類選擇器的情況。
總結(jié)優(yōu)先級：
1.使用了 !important聲明的規(guī)則瓜客。
2.內(nèi)嵌在 HTML 元素的 style屬性里面的聲明适瓦。
3.使用了 ID 選擇器的規(guī)則。
4.使用了類選擇器谱仪、屬性選擇器玻熙、偽元素和偽類選擇器的規(guī)則。
5.使用了元素選擇器的規(guī)則疯攒。
6.只包含一個(gè)通用選擇器的規(guī)則嗦随。
~~~
總結(jié)：權(quán)重是優(yōu)先級的算法，層疊是優(yōu)先級的表現(xiàn)
~~~
# 盒子模型（CSS重點(diǎn)）
其實(shí)敬尺，CSS就三個(gè)大模塊：? 盒子模型 枚尼、 浮動 肌毅、 定位，其余的都是細(xì)節(jié)姑原。要求這三部分悬而，無論如何也要學(xué)的非常精通。?
所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子锭汛，也就是一個(gè)盛裝內(nèi)容的容器笨奠。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）唤殴、邊框（border）和外邊距（margin）組成般婆。
首先，我們來看一張圖朵逝，來體會下什么是盒子模型蔚袍。
所有的文檔元素（標(biāo)簽）都會生成一個(gè)矩形框，我們成為元素框（element box）配名，它描述了一個(gè)文檔元素再網(wǎng)頁布局匯總所占的位置大小啤咽。因此，每個(gè)盒子除了有自己大小和位置外渠脉，還影響著其他盒子的大小和位置宇整。
## 盒子邊框（border）
邊框就是那層皮。? 橘子皮芋膘。鳞青。柚子皮。为朋。橙子皮臂拓。。习寸。
語法：?
~~~css
border : border-width || border-style || border-color?
~~~
邊框?qū)傩浴O(shè)置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風(fēng)格胶惰，常用屬性值如下：
~~~
none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
solid：邊框?yàn)閱螌?shí)線(最為常用的)
dashed：邊框?yàn)樘摼€
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線
~~~
### 表格的細(xì)線邊框
以前學(xué)過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來融涣。 讓我們真的相信童番，CSS就是我們的白馬王子（白雪公主）精钮。
table{ border-collapse:collapse; }
border-collapse:collapse; 表示合并相鄰邊框
### 盒子邊框總結(jié)表
|? ? ? ? |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| ------ | ---------------------------------------- | ---------------------------------------- |
| 設(shè)置內(nèi)容? | 樣式屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 常用屬性值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| 上邊框? ? | border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色; |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| 下邊框? ? | border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色; |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| 左邊框? ? | border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色; |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| 右邊框? ? | border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色; |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| 樣式綜合設(shè)置 | border-style:上邊 [右邊 下邊 左邊];? ? ? ? ? ? ? | none無（默認(rèn)）威鹿、solid單實(shí)線、dashed虛線轨香、dotted點(diǎn)線忽你、double雙實(shí)線 |
| 寬度綜合設(shè)置 | border-width:上邊 [右邊 下邊 左邊];? ? ? ? ? ? ? | 像素值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| 顏色綜合設(shè)置 | border-color:上邊 [右邊 下邊 左邊];? ? ? ? ? ? ? | 顏色值、#十六進(jìn)制臂容、rgb(r,g,b)科雳、rgb(r%,g%,b%)? ? ? |
| 邊框綜合設(shè)置 | border:四邊寬度 四邊樣式 四邊顏色;? ? ? ? ? ? ? ? ? |? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
### 圓角邊框(CSS3)
從此以后根蟹，我們的世界不只有矩形。
語法格式：
~~~css
Border-radius: 水平半徑/垂直半徑糟秘；
~~~
?一般我們垂直半徑都是省略的默認(rèn)和水平半徑一樣简逮。
~~~css
border-radius: 左上角? 右上角? 右下角? 左下角;
~~~
## 內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。? 是指 邊框與內(nèi)容之間的距離尿赚。
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
| 值的個(gè)數(shù) | 表達(dá)意思? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? |
| ---- | ---------------------------------------- |
| 1個(gè)值? | padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素 |
| 2個(gè)值? | padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3個(gè)值? | padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4個(gè)值? | padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時(shí)針 |
## 外邊距（margin）
margin屬性用于設(shè)置外邊距散庶。? 設(shè)置外邊距會在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容凌净。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距? 下外邊距? 左外邊
取值順序跟內(nèi)邊距相同悲龟。
### 外邊距實(shí)現(xiàn)盒子居中
可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：
1.必須是塊級元素冰寻。? ? ?
2.盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto须教，就可使塊級元素水平居中。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局斩芭，示例代碼如下：
~~~css
.header{ width:960px; margin:0 auto;}
~~~
### 清除元素的默認(rèn)內(nèi)外邊距
為了更方便地控制網(wǎng)頁中的元素轻腺，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：?
~~~css
* {
?? padding:0;? ? ? ? /* 清除內(nèi)邊距 */
?? margin:0;? ? ? ? ? /* 清除外邊距 */
}
~~~
注意：? 行內(nèi)元素是只有左右內(nèi)外邊距的划乖，是沒有上下內(nèi)外邊距的约计。我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距。
## 外邊距合并
使用margin定義塊元素的垂直外邊距時(shí)迁筛，可能會出現(xiàn)外邊距的合并煤蚌。
### 相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom细卧，下面的元素有上外邊距margin-top尉桩，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者贪庙。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）蜘犁。
### 嵌套塊元素垂直外邊距的合并
對于兩個(gè)嵌套關(guān)系的塊元素止邮，如果父元素沒有上內(nèi)邊距及邊框这橙，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者导披，即使父元素的上外邊距為0屈扎，也會發(fā)生合并。
解決方案：
1.可以為父元素定義1像素的上邊框或上內(nèi)邊距撩匕。
2.可以為父元素添加overflow:hidden鹰晨。
## content寬度和高度
使用寬度屬性width和高度屬性height可以對盒子的大小進(jìn)行控制。
width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比%，實(shí)際工作中最常用的是像素值模蜡。
大多數(shù)瀏覽器漠趁，如Firefox、IE6及以上版本都采用了W3C規(guī)范忍疾，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：
~~~
盒子的總寬度= width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和
~~~
~~~
盒子的總高度= height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和
~~~
注意：
1闯传、寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）卤妒。
2丸边、計(jì)算盒子模型的總高度時(shí)展父，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況警医。
3髓削、如果一個(gè)盒子沒有給定寬度/高度或者繼承父親的寬度/高度续誉，則padding不會影響本盒子的大小
## 盒子模型布局穩(wěn)定性
開始學(xué)習(xí)盒子模型朦促，同學(xué)們最大的困惑就是碟贾， 分不清內(nèi)外邊距的使用浪汪，什么情況下使用內(nèi)邊距琼富，什么情況下使用外邊距判没？
答案是：? 其實(shí)他們大部分情況下是可以混用的蜓萄。? 就是說，你用內(nèi)邊距也可以澄峰，用外邊距也可以嫉沽。 你覺得哪個(gè)方便，就用哪個(gè)俏竞。
但是绸硕，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來分魂毁，建議如下：
按照 優(yōu)先使用? 寬度 （width）? 其次 使用內(nèi)邊距（padding）? ? 再次? 外邊距（margin）玻佩。? ?
```
? width >? padding? >? margin? ?
```
原因：
1.margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
2.padding? 會影響盒子大小席楚， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用咬崔。
3.width? 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。
## CSS3盒模型
CSS3中可以通過box-sizing 來指定盒模型烦秩，即可指定為content-box垮斯、border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變只祠。
可以分成兩種情況：
1兜蠕、box-sizing: border-box? 盒子大小為 width
2、box-sizing: content-box? 盒子大小為 width + padding + border
注：上面的標(biāo)注的width指的是CSS屬性里設(shè)置的width: length铆农，content的值是會自動調(diào)整的牺氨。
~~~css
div {
? width: 100px;
? height: 100px;
? background: skyblue;
? margin: 0 auto;
? border: 1px solid gray;
? /*?
? 默認(rèn)的設(shè)置 如果我們添加了 border屬性 該容器的大小會發(fā)生改變
? 因?yàn)樗獌?yōu)先保證內(nèi)部的內(nèi)容所占區(qū)域 不變
? */
? /*?
? box-sizing? 如果不設(shè)置 默認(rèn)的值 就是 content-box: 優(yōu)先保證內(nèi)容的大小 對盒子進(jìn)行縮放;
? border-box: 讓 盒子 優(yōu)先保證自己所占區(qū)域的大小,對內(nèi)容進(jìn)行壓縮;
? */
? box-sizing: border-box;
}
~~~?
## 盒子陰影
語法格式：
~~~css
box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸(影子大小) 陰影顏色? 內(nèi)/外陰影狡耻；
~~~
1.前兩個(gè)屬性是必須寫的墩剖。其余的可以省略猴凹。
2.外陰影 (outset 默認(rèn)) 但是不能寫 ? ? ? ?想要內(nèi)陰影? inset?
~~~css
img {
? border:10px solid orange;
? box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}
~~~
# 浮動(float)
## 普通流(normal flow)
這個(gè)單詞很多人翻譯為 文檔流 ， 字面翻譯? 普通流 或者標(biāo)準(zhǔn)流都可以岭皂。
前面我們說過郊霎，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置爷绘。如何把盒子擺放到合適的位置书劝？?
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動和定位土至。
html語言當(dāng)中另外一個(gè)相當(dāng)重要的概念----------標(biāo)準(zhǔn)流购对！或者普通流。普通流實(shí)際上就是一個(gè)網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下陶因，從左到右排列順序的意思骡苞，比如塊級元素會獨(dú)占一行，行內(nèi)元素會按順序依次前后排列楷扬；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局解幽。
## 什么是浮動？
div {
display: inline-block;轉(zhuǎn)換為行內(nèi)塊元素 就可以放一行上有寬度和高度烘苹，但是元素之間有空隙 不容易處理
}
元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)普通流的控制躲株，移動到其父元素中指定位置的過程。
在CSS中镣衡，通過float屬性來定義浮動霜定，其基本語法格式如下：
~~~
選擇器{float:屬性值;}
~~~
## 浮動詳細(xì)內(nèi)幕特性
```
浮動首先創(chuàng)建包含塊的概念（包裹）。就是說廊鸥， 浮動的元素總是找理它最近的父級元素對齊然爆。但是不會超出內(nèi)邊距的范圍。?
```
```
浮動的元素排列位置黍图，跟上一個(gè)元素（塊級）有關(guān)系曾雕。如果上一個(gè)元素有浮動，則A元素頂部會和上一個(gè)元素的頂部對齊助被；如果上一個(gè)元素是標(biāo)準(zhǔn)流剖张，則A元素的頂部會和上一個(gè)元素的底部對齊。
```
可以推斷出揩环，一個(gè)父盒子里面的子盒子搔弄，如果其中一個(gè)子級有浮動的，則其他子級都需要浮動丰滑。這樣才能一行對齊顯示顾犹。
浮動脫離標(biāo)準(zhǔn)流倒庵，不占位置，會影響標(biāo)準(zhǔn)流炫刷。浮動只有左右浮動擎宝。
元素添加浮動后，元素會具有行內(nèi)塊元素的特性浑玛。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少
浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動绍申。
## 清除浮動本質(zhì)
清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為0 的問題。
## 清除浮動的方法
其實(shí)本質(zhì)叫做閉合浮動更好一些, 記住顾彰，清除浮動就是把浮動的盒子圈到里面极阅，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中涨享，clear屬性用于清除浮動筋搏，其基本語法格式如下：
```
選擇器{clear:屬性值;}
```
| 屬性值? | 描述? ? ? ? ? ? ? ? ? ? |
| ----- | --------------------- |
| left? | 不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響） |
| right | 不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響） |
| both? | 同時(shí)清除左右兩側(cè)浮動的影響? ? ? ? |
### 額外標(biāo)簽法
```html
是W3C推薦的做法是通過在浮動元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可厕隧。
```
優(yōu)點(diǎn)： 通俗易懂奔脐，書寫方便
缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差栏账。? 我只能說帖族，w3c你推薦的方法我不接受，你不值得擁有挡爵。竖般。。
### 父級添加overflow屬性方法
可以通過觸發(fā)BFC的方式茶鹃，可以實(shí)現(xiàn)清除浮動效果涣雕。（BFC后面講解）
~~~css
可以給父級添加： overflow為 hidden|auto|scroll? 都可以實(shí)現(xiàn)。
~~~
優(yōu)點(diǎn)：? 代碼簡潔
缺點(diǎn)：? 內(nèi)容增多時(shí)候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉闭翩，無法顯示需要溢出的元素挣郭。
### 使用after偽元素清除浮動
:after方式是空元素的升級版，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
```css
?.clearfix:after {? content: "."; display: block; height: 0; clear: both; visibility: hidden;? }? ?
?.clearfix {*zoom: 1;}? /* IE6疗韵、7 專有 */
```
優(yōu)點(diǎn)： 符合閉合浮動思想? 結(jié)構(gòu)語義化正確
缺點(diǎn)： 由于IE6-7不支持:after兑障，使用 zoom:1觸發(fā) hasLayout。?
注意： content:"."? 里面盡量跟一個(gè)小點(diǎn)蕉汪，或者其他流译，盡量不要為空，否則再firefox 7.0前的版本會有生成空格者疤。
### 使用before和after雙偽元素清除浮動
使用方法：
```css
.clearfix:before,.clearfix:after {?
? content:".";
? display:table;
}
.clearfix:after {
?clear:both;
}
.clearfix {
? *zoom:1;
}
```
優(yōu)點(diǎn)：? 代碼更簡潔
缺點(diǎn)：? 由于IE6-7不支持:after福澡，使用 zoom:1觸發(fā) hasLayout。
# 定位(position)
如果驹马，說浮動革砸， 關(guān)鍵在一個(gè) “浮” 字上面除秀， 那么 我們的定位，關(guān)鍵在于一個(gè) “位” 上算利。
PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了册踩，但是，你務(wù)必要學(xué)好它笔时，我們CSS離不開定位棍好，特別是后面的js特效仗岸，天天和定位打交道允耿。
## 元素的定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1扒怖、邊偏移
| 邊偏移屬性? | 描述? ? ? ? ? ? ? ? ? ? ? |
| ------ | ----------------------- |
| top? ? | 頂端偏移量较锡，定義元素相對于其父元素上邊線的距離 |
| bottom | 底部偏移量，定義元素相對于其父元素下邊線的距離 |
| left? | 左側(cè)偏移量盗痒，定義元素相對于其父元素左邊線的距離 |
| right? | 右側(cè)偏移量蚂蕴，定義元素相對于其父元素右邊線的距離 |
也就說，以后定位要和這邊偏移搭配使用了俯邓， 比如 top: 100px;? left: 30px; 等等
2骡楼、定位模式
在CSS中，position屬性用于定義元素的定位模式稽鞭，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
| 值? ? ? ? | 描述? ? ? ? ? ? ? ? ? ? ? |
| -------- | ------------------------ |
| static? | 自動定位（默認(rèn)定位方式）? ? ? ? ? ? |
| relative | 相對定位鸟整，相對于其原文檔流的位置進(jìn)行定位? ? |
| absolute | 絕對定位，相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位 |
| fixed? ? | 固定定位朦蕴，相對于瀏覽器窗口進(jìn)行定位? ? ? ? |
## 靜態(tài)定位(static)
靜態(tài)定位是所有元素的默認(rèn)定位方式篮条，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置吩抓。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置涉茧。
上面的話翻譯成白話：? 就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位哦！ 其實(shí)就是標(biāo)準(zhǔn)流的特性疹娶。
在靜態(tài)定位狀態(tài)下伴栓，無法通過邊偏移屬性（top、bottom雨饺、left或right）來改變元素的位置钳垮。
PS： 靜態(tài)定位其實(shí)沒啥可說的。
注意：靜態(tài)定位 對于邊偏移是無效的沛膳；一般它用來清除定位的扔枫，一個(gè)原來有定位的盒子，不想加定位了锹安，就用靜態(tài)定位
## 相對定位relative
相對定位是將元素相對于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位短荐，當(dāng)position屬性的取值為relative時(shí)倚舀，可以將元素定位于相對位置。
對元素設(shè)置相對定位后忍宋，可以通過邊偏移屬性改變元素的位置痕貌，但是它在文檔流中的位置仍然保留。如下圖所示糠排，即是一個(gè)相對定位的效果展示：
注意： ??
1舵稠、相對定位最重要的一點(diǎn)是，它可以通過邊偏移移動位置入宦，但是原來的所占的位置哺徊，繼續(xù)占有。
2乾闰、其次落追，每次移動的位置，是以自己的左上角為基點(diǎn)移動（相對于自己來移動位置）
就是說涯肩，相對定位的盒子仍在標(biāo)準(zhǔn)流中轿钠，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。如果說浮動的主要目的是讓多個(gè)塊級元素一行顯示病苗，那么定位的主要價(jià)值就是移動位置疗垛，讓盒子到我們想要的位置上去。
## 絕對定位absolute?
[注意] 如果文檔可滾動硫朦，絕對定位元素會隨著它滾動贷腕，因?yàn)樵刈罱K會相對于正常流的某一部分定位。
當(dāng)position屬性的取值為absolute時(shí)阵幸，可以將元素的定位模式設(shè)置為絕對定位花履。
注意：? ? 絕對定位最重要的一點(diǎn)是，它可以通過邊偏移移動位置挚赊，但是它完全脫標(biāo)诡壁，完全不占位置。
（1） 父級沒有定位
若所有父元素都沒有定位荠割，以瀏覽器為基準(zhǔn)點(diǎn)對齊(document文檔)妹卿。
（2）?父級有定位
絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進(jìn)行定位蔑鹦。?
（3）絕對定位的盒子沒有邊偏移
如果只是給盒子指定了 定位夺克，但是沒有給與邊偏移，則改盒子以標(biāo)準(zhǔn)流來顯示排序嚎朽，和上一個(gè)盒子的底邊對齊铺纽，但是不占有位置。
（4）子絕父相
這個(gè)“子絕父相”太重要了哟忍，是我們學(xué)習(xí)定位的口訣狡门，時(shí)時(shí)刻刻記住的陷寝。
這句話的意思是 子級是絕對定位的話， 父級要用相對定位其馏。
首先凤跑， 我們說下， 絕對定位是將元素依據(jù)最近的已經(jīng)定位絕對叛复、固定或相對定位）的父元素（祖先）進(jìn)行定位仔引。
就是說， 子級是絕對定位褐奥，父親只要是定位即可（不管父親是絕對定位還是相對定位咖耘，甚至是固定定位都可以），就是說抖僵， 子絕父絕鲤看，子絕父相都是正確的缘揪。
因?yàn)樽蛹壥墙^對定位耍群，不會占有位置， 可以放到父盒子里面的任何一個(gè)地方找筝。
父盒子布局時(shí)蹈垢，需要占有位置，因此父親只能是 相對定位.?
這就是子絕父相的由來袖裕。
（5）絕對定位的盒子水平或者垂直居中
加了絕對定位的盒子曹抬，margin左右auto就無效了。
定位的盒子也可以水平或者垂直居中急鳄，有一個(gè)算法（水平居中）：
1.首先left50%（父盒子的一半大邪瘛）
2.然后設(shè)置外邊距自己盒子大小負(fù)的一半值就可以了。margin-left: -width/2;
## 固定定位fixed(認(rèn)死理型)
固定定位是絕對定位的一種特殊形式疾宏，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素张足。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位坎藐。
當(dāng)對元素設(shè)置固定定位后为牍，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置岩馍。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化碉咆，該元素都會始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點(diǎn)：
1.固定定位的元素跟父親沒有任何關(guān)系蛀恩，只認(rèn)瀏覽器疫铜。
2.固定定位完全脫標(biāo)，不占有位置双谆，不隨著滾動條滾動壳咕。
2.固定定位要設(shè)置寬度和高度励稳，除非有內(nèi)容把它撐開不用寫。
## 疊放次序（z-index）
當(dāng)對多個(gè)元素同時(shí)設(shè)置定位時(shí)囱井，定位元素之間有可能會發(fā)生重疊驹尼。
在CSS中，要想調(diào)整重疊定位元素的堆疊順序庞呕，可以對定位元素應(yīng)用z-index層疊等級屬性新翎，其取值可為正整數(shù)、負(fù)整數(shù)和0住练。
比如：? z-index: 2;
注意：
1.z-index的默認(rèn)屬性值是0地啰，取值越大，定位元素在層疊元素中越居上讲逛。
2.如果取值相同亏吝，則根據(jù)書寫順序，后來居上盏混。
3.后面數(shù)字一定不能加單位蔚鸥。
4.只有相對定位，絕對定位许赃，固定定位有此屬性止喷，其余標(biāo)準(zhǔn)流，浮動混聊，靜態(tài)定位都無此屬性弹谁，亦不可指定此屬性。
# 四種定位總結(jié)
| 定位模式? ? ? ? | 是否脫標(biāo)占有位置? | 是否可以使用邊偏移 | 移動位置基準(zhǔn)? ? ? |
| ------------ | ---------- | --------- | ----------- |
| 靜態(tài)static? ? | 不脫標(biāo)句喜，正常模式? | 不可以? ? ? | 正常模式? ? ? ? |
| 相對定位relative | 不脫標(biāo)预愤，占有位置? | 可以? ? ? ? | 相對自身位置移動? ? |
| 絕對定位absolute | 完全脫標(biāo)，不占有位置 | 可以? ? ? ? | 相對于定位父級移動位置 |
| 固定定位fixed? ? | 完全脫標(biāo)咳胃，不占有位置 | 可以? ? ? ? | 相對于瀏覽器移動位置? |
# 定位模式轉(zhuǎn)換
跟 浮動一樣植康， 元素添加了 絕對定位和固定定位之后， 元素模式也會發(fā)生轉(zhuǎn)換拙绊， 都轉(zhuǎn)換為 行內(nèi)塊模式向图， 因此 比如 行內(nèi)元素 如果添加了 絕對定位或者 固定定位后，可以不用轉(zhuǎn)換模式标沪，直接給高度和寬度就可以了榄攀。
# 元素的顯示與隱藏
在CSS中有三個(gè)顯示和隱藏的單詞比較常見，我們要區(qū)分開金句，他們分別是 display visibility 和 overflow檩赢。
他們的主要目的是讓一個(gè)元素在頁面中消失，但是不在文檔源碼中刪除。 最常見的是網(wǎng)站廣告贞瞒，當(dāng)我們點(diǎn)擊類似關(guān)閉不見了偶房，但是我們重新刷新頁面，它們又會出現(xiàn)和你玩躲貓貓＞棕洋！
## display 顯示
display 設(shè)置或檢索對象是否及如何顯示。
display : none 隱藏對象 與它相反的是 display:block 除了轉(zhuǎn)換為塊級元素之外乒融，同時(shí)還有顯示元素的意思掰盘。
特點(diǎn)： 隱藏之后，不再保留位置赞季。
## visibility 可見性
設(shè)置或檢索是否顯示對象忘伞。
visible : 對象可視
hidden : 對象隱藏
特點(diǎn)： 隱藏之后展氓，繼續(xù)保留原有位置估蹄。（停職留薪）
## overflow 溢出
檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容始锚。
visible : 不剪切內(nèi)容也不添加滾動條。
auto : 超出自動顯示滾動條撒遣，不超出不顯示滾動條
hidden : 不顯示超過對象尺寸的內(nèi)容邮偎，超出的部分隱藏掉
scroll : 不管超出內(nèi)容否，總是顯示滾動條
# CSS高級技巧
## CSS用戶界面樣式
?所謂的界面樣式愉舔， 就是更改一些用戶操作樣式钢猛， 比如 更改用戶的鼠標(biāo)樣式， 表單輪廓等轩缤。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了贩绕。 防止表單域拖拽
### 鼠標(biāo)樣式cursor
?設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀火的。?
```html
cursor :? default? 小白 | pointer? 小手? | move? 移動? |? text? 文本
```
<ul>
? ? <li style="cursor:default">我是小白</li>
? ? <style="cursor:pointer">我是小手</li>?
<ul />
?盡量不要用hand? 因?yàn)?火狐不支持? ? pointer ie6以上都支持的盡量用
### 輪廓 outline
?是繪制于元素周圍的一條線，位于邊框邊緣的外圍淑倾，可起到突出元素的作用馏鹤。
~~~css
?outline : outline-color ||outline-style || outline-width?
~~~
?但是我們都不關(guān)心可以設(shè)置多少，我們平時(shí)都是去掉的娇哆。
最直接的寫法是 ：? outline: 0;?
### 防止拖拽文本域resize
resize：none? ? 這個(gè)單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域湃累。
右下角可以拖拽：?
<textarea></textarea>
右下角不可以拖拽：?
```html
<textarea? style="resize: none;">
```
## vertical-align 垂直對齊
以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto; 或者div{
? ? width:200px;
? ? height:100px;
????margin-left:auto;
????margin-right:auto;? ??
}
以前我們還講過讓文字居中對齊碍讨，是 text-align: center;
vertical-align 垂直對齊(對塊級元素?zé)o效)治力， 這個(gè)看上去很美好的一個(gè)屬性， 實(shí)際有著不可捉摸的脾氣勃黍，否則我們也不會這么晚來講解宵统。
設(shè)置或檢索對象內(nèi)容的垂直對其方式。?
vertical-align 不影響塊級元素中的內(nèi)容對齊覆获，它只針對于 行內(nèi)元素或者行內(nèi)塊元素马澈，特別是行內(nèi)塊元素瓢省， 通常用來控制圖片/表單與文字的對齊。
所以我們知道痊班，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了勤婚。 默認(rèn)的圖片會和文字基線對齊。
### 去除圖片底側(cè)空白縫隙
有個(gè)很重要特性你要記椎臃ァ： 圖片或者表單等行內(nèi)塊元素蛔六，他的底線會和父級盒子的基線對齊。 這樣會造成一個(gè)問題废亭，就是圖片底側(cè)會有一個(gè)空白縫隙国章。
解決的方法就是：?
1.給img vertical-align:middle | top等等。? 讓圖片不要和基線對齊豆村。
2.給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了液兽。
溢出文字的隱藏
word-break:自動換行
normal 使用瀏覽器默認(rèn)的換行規(guī)則；
break-all 允許在單詞內(nèi)換行（允許單詞拆開顯示）掌动。
keep-all 只能在半角空格或連字符處換行（不予許單詞拆開顯示四啰，除非連字符-或者空格）。
主要處理英文單詞粗恢。
white-space
white-space設(shè)置或檢索對象內(nèi)文本顯示方式柑晒。通常我們使用于強(qiáng)制一行顯示內(nèi)容。
normal: 默認(rèn)處理方式眷射。
nowrap: 強(qiáng)制在同一行內(nèi)顯示所有文本匙赞，直到文本結(jié)束或者遭遇br標(biāo)簽對象才換行。
text-overflow
text-overflow:clip | ellipsis
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出妖碉。
clip: 不顯示省略標(biāo)記（...）涌庭，而是簡單的裁切。
ellipsis: 當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）欧宜。
注意一定要首先強(qiáng)制一行內(nèi)顯示坐榆，再次和overflow屬性搭配使用。
##多行文本溢出隱藏冗茸，顯示省略號
針對webkit內(nèi)核瀏覽器做法：
通用制作方法：
## CSS精靈技術(shù)（sprite）
### 精靈技術(shù)產(chǎn)生的背景
當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)席镀，需要向服務(wù)器發(fā)送請求，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶夏漱。
然而豪诲，一個(gè)網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時(shí)麻蹋，服務(wù)器就會頻繁地接受和發(fā)送請求跛溉，這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度芳室，出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites专肪、CSS雪碧）。
### 精靈技術(shù)本質(zhì)
簡單地說堪侯，CSS精靈是一種處理網(wǎng)頁背景圖像的方式嚎尤。它將一個(gè)頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁伍宦，這樣芽死，當(dāng)用戶訪問該頁面時(shí)，只需向服務(wù)發(fā)送一次請求次洼，網(wǎng)頁中的背景圖像即可全部展示出來关贵。通常情況下，這個(gè)由很多小的背景圖像合成的大圖被稱為 精靈圖卖毁，
### 精靈技術(shù)的使用
CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖）揖曾，然而，各個(gè)網(wǎng)頁元素通常只需要精靈圖中不同位置的某個(gè)小圖亥啦，要想精確定位到精靈圖中的某個(gè)小圖炭剪，就需要使用CSS的background-image、background-repeat和background-position屬性進(jìn)行背景定位翔脱，其中最關(guān)鍵的是使用background-position屬性精確地定位奴拦。
## 字體圖標(biāo)
圖片是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯届吁，比如圖片不但增加了總文件的大小错妖，還增加了很多額外的"http請求"，這都會大大降低網(wǎng)頁的性能的瓷产。更重要的是圖片不能很好的進(jìn)行“縮放”站玄，因?yàn)閳D片放大和縮小會失真。 我們后面會學(xué)習(xí)移動端響應(yīng)式濒旦，很多情況下希望我們的圖標(biāo)是可以縮放的。此時(shí)再登，一個(gè)非常重要的技術(shù)出現(xiàn)了尔邓，額不是出現(xiàn)了，是以前就有锉矢，是被從新"寵幸"啦梯嗽。。 這就是字體圖標(biāo)（iconfont).
### 字體圖標(biāo)優(yōu)點(diǎn)
```
可以做出跟圖片一樣可以做的事情,改變透明度沽损、旋轉(zhuǎn)度灯节，等..
但是本質(zhì)其實(shí)是文字，可以很隨意的改變顏色、產(chǎn)生陰影炎疆、透明效果等等...
本身體積更小卡骂，但攜帶的信息并沒有削減。
幾乎支持所有的瀏覽器
移動端設(shè)備必備良藥...
```
#### 上傳生成字體包
?? 當(dāng)UI設(shè)計(jì)人員給我們svg文件的時(shí)候形入，我們需要轉(zhuǎn)換成我們頁面能使用的字體文件全跨， 而且需要生成的是兼容性的適合各個(gè)瀏覽器的。
?? ? 推薦網(wǎng)站： http://icomoon.io
**icomoon字庫**
IcoMoon成立于2011年亿遂，推出的第一個(gè)自定義圖標(biāo)字體生成器浓若，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型蛇数。 內(nèi)容種類繁多挪钓，非常全面，唯一的遺憾是國外服務(wù)器耳舅，打開網(wǎng)速較慢碌上。
?? 推薦網(wǎng)站： http://www.iconfont.cn/
**阿里icon font字庫**
http://www.iconfont.cn/
這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫挽放∩苋可以使用AI制作圖標(biāo)上傳生成。 一個(gè)字辑畦，免費(fèi)吗蚌，免費(fèi)！纯出！
**fontello**
[http://fontello.com/](http://fontello.com/)
在線定制你自己的icon font字體圖標(biāo)字庫蚯妇，也可以直接從GitHub下載整個(gè)圖標(biāo)集，該項(xiàng)目也是開源的暂筝。
**Font-Awesome**
[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)
這是我最喜歡的字庫之一了箩言，更新比較快。目前已經(jīng)有369個(gè)圖標(biāo)了焕襟。
**Glyphicon Halflings**
[http://glyphicons.com/](http://glyphicons.com/)
這個(gè)字體圖標(biāo)可以在Bootstrap下免費(fèi)使用陨收。自帶了200多個(gè)圖標(biāo)。
**Icons8**
[https://icons8.com/](https://icons8.com/)
提供PNG免費(fèi)下載鸵赖，像素大能到500PX
#### 下載兼容字體包
剛才上傳完畢务漩， 網(wǎng)站會給我們把UI做的svg圖片轉(zhuǎn)換為我們的字體格式， 然后下載下來就好了
當(dāng)然它褪，我們不需要自己專門的圖標(biāo)饵骨，是想網(wǎng)上找?guī)讉€(gè)圖標(biāo)使用，以上2步可以直接省略了茫打， 直接到剛才的網(wǎng)站上找喜歡的下載使用吧居触。
#### 字體引入到HTML
最后一步妖混，是最重要的一步了， 就是字體文件已經(jīng)有了轮洋，我們需要引入到我們頁面中制市。
1.首先把 以下4個(gè)文件放入到 fonts文件夾里面。 通俗的做法
?? ### 第一步：在樣式里面聲明字體：告訴別人我們自定義字體
?### 第二步：給盒子使用字體
?### 第三步：給盒子里面添加結(jié)構(gòu)
### 核心技術(shù)
核心技術(shù)就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄砖瞧。
一般的經(jīng)典布局都是這樣的：
<li>
? ? <a href="#">
? ? <span>導(dǎo)航欄內(nèi)容</span>
? ? </a>
</li>
總結(jié)：?
1.a 設(shè)置 背景左側(cè)息堂，padding撐開合適寬度。? ?
2.span 設(shè)置背景右側(cè)块促， padding撐開合適寬度 剩下由文字繼續(xù)撐開寬度荣堰。
3.之所以a包含span就是因?yàn)?整個(gè)導(dǎo)航都是可以點(diǎn)擊的。
before和after偽元素（詳解）?
之所以被稱為偽元素竭翠，是因?yàn)樗麄儾皇钦嬲捻撁嬖卣窦幔琱tml沒有對應(yīng)的元素，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣斋扰，可以對其使用諸如頁面元素一樣的css樣式渡八，表面上看上去貌似是頁面的某些元素來展現(xiàn)，實(shí)際上是css樣式展現(xiàn)的行為传货，因此被稱為偽元素屎鳍。偽元素在html代碼機(jī)構(gòu)中的展現(xiàn)，可以看出偽元素的結(jié)構(gòu)是無法審查的问裕。
注意：
1.偽元素：before和：after添加的內(nèi)容默認(rèn)是inline元素逮壁；這個(gè)兩個(gè)偽元素的content屬性，表示偽元素的內(nèi)容粮宛，設(shè)置：before和：after時(shí)必須設(shè)置其content屬性窥淆，否則偽元素就不起作用。
2.類選擇器和偽類選擇器是選取對象巍杈，而偽元素選擇器本質(zhì)上是插入一個(gè)元素（標(biāo)簽 盒子）
3.要偽元素不占位置忧饭，就用絕對定位。
## 過渡(CSS3)
過渡（transition)是CSS3中具有顛覆性的特征之一筷畦，我們可以在不使用 Flash 動畫或 JavaScript 的情況下词裤，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
在CSS3里使用transition可以實(shí)現(xiàn)補(bǔ)間動畫（過渡效果）鳖宾，并且當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)即存在兩種狀態(tài)(我們用A和B代指）亚斋，就可以實(shí)現(xiàn)平滑的過渡，為了方便演示采用hover切換兩種狀態(tài)攘滩，但是并不僅僅局限于hover狀態(tài)來實(shí)現(xiàn)過渡。
語法格式:
~~~
transition: 要過渡的屬性? 花費(fèi)時(shí)間? 運(yùn)動曲線? 何時(shí)開始;
如果有多組屬性變化纸泡，還是用逗號隔開漂问。
~~~
## 2D變形(CSS3)
轉(zhuǎn)換是CSS3中具有顛覆性的特征之一赖瞒，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)蚤假、變形栏饮、縮放，甚至支持矩陣方式磷仰，配合過渡和即將學(xué)習(xí)的動畫知識袍嬉，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。
變形轉(zhuǎn)換 transform?
-移動 translate(x, y)?
```css
translate(50px,50px);
```
使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素灶平。
可以改變元素的位置伺通，x、y可為負(fù)值逢享；
~~~
?translate(x,y)水平方向和垂直方向同時(shí)移動（也就是X軸和Y軸同時(shí)移動）
?translateX(x)僅水平方向移動（X軸移動）
?translateY(Y)僅垂直方向移動（Y軸移動）
~~~
transform-origin可以調(diào)整元素轉(zhuǎn)換變形的原點(diǎn)
?縮放 scale(x, y)?
```css
transform:scale(0.8,1);
```
可以對元素進(jìn)行水平和垂直方向的縮放罐监。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放瞒爬。
~~~
scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
~~~
?scale()的取值默認(rèn)的值為1弓柱，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮胁嗟矢空；而任何大于或等于1.01的值，作用是讓元素放大
-旋轉(zhuǎn) rotate(deg)?
可以對元素進(jìn)行旋轉(zhuǎn)禀横，正值為順時(shí)針屁药，負(fù)值為逆時(shí)針；
~~~css
transform:rotate(45deg);
~~~
1.當(dāng)元素旋轉(zhuǎn)以后燕侠，坐標(biāo)軸也跟著發(fā)生的轉(zhuǎn)變
2.調(diào)整順序可以解決者祖，把旋轉(zhuǎn)放到最后
3.注意單位是 deg 度數(shù)
傾斜 skew(deg, deg)?
```css
transform:skew(30deg,0deg);
```
該實(shí)例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變绢彤。
可以使元素按一定的角度進(jìn)行傾斜七问，可為負(fù)值，第二個(gè)參數(shù)不寫默認(rèn)為0茫舶。
## 3D變形
###? rotateX()?
?就是沿著 x 立體旋轉(zhuǎn).
~~~css
img {
? transition:all 0.5s ease 0s;
}
img:hove {
? transform:rotateX(180deg);
}
~~~
### rotateY()
沿著y軸進(jìn)行旋轉(zhuǎn)
### rotateZ()?
沿著z軸進(jìn)行旋轉(zhuǎn)
### 透視(perspective)
電腦顯示屏是一個(gè)2D平面械巡，圖像之所以具有立體感（3D效果），其實(shí)只是一種視覺呈現(xiàn)饶氏，通過透視可以實(shí)現(xiàn)此目的讥耗。
透視可以將一個(gè)2D平面，在轉(zhuǎn)換的過程當(dāng)中疹启，呈現(xiàn)3D效果古程。
注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進(jìn)行設(shè)置喊崖。
perspective有兩種寫法
1.作為一個(gè)屬性挣磨，設(shè)置給父元素雇逞，作用于所有3D轉(zhuǎn)換的子元素
2.作為transform屬性的一個(gè)值，做用于元素自身
### translateZ(z)
transformZ的直觀表現(xiàn)形式就是大小變化茁裙，實(shí)質(zhì)是XY平面相對于視點(diǎn)的遠(yuǎn)近變化（說遠(yuǎn)近就一定會說到離什么參照物遠(yuǎn)或近塘砸，在這里參照物就是perspective屬性）。比如設(shè)置了perspective為200px;那么transformZ的值越接近200晤锥，就是離的越近掉蔬，看上去也就越大，超過200就看不到了矾瘾，因?yàn)橄喈?dāng)于跑到后腦勺去了女轿，我相信你正常情況下，是看不到自己的后腦勺的霜威。
backface-visibility
屬性定義當(dāng)元素不面向屏幕時(shí)是否可見谈喳。
###? 3D呈現(xiàn)（transform-style）
transform-style屬性是3D空間一個(gè)重要屬性，指定嵌套元素如何在3D空間中呈現(xiàn)戈泼。他主要有兩個(gè)屬性值：flat和preserve-3d婿禽。
其中flat為默認(rèn)值，表示所有子元素在2d平面呈現(xiàn)大猛。preserve-3d表示所有子元素在3D空間中呈現(xiàn)扭倾。
flat：所有子元素在 2D 平面呈現(xiàn)
preserve-3d：保留3D空間
3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的，可以給這些元素的父元素設(shè)置transform-style: preserve-3d來使其變成一個(gè)真正的3D圖形挽绩。
一般而言膛壹，該聲明應(yīng)用在3D變換的兄弟元素們的父元素上。
## 動畫(CSS3)
動畫是CSS3中具有顛覆性的特征之一唉堪，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動畫模聋，常用來實(shí)現(xiàn)復(fù)雜的動畫效果。
語法格式：
~~~css
animation:動畫名稱 動畫時(shí)間 運(yùn)動曲線? 何時(shí)開始? 播放次數(shù)? 是否反方向;
~~~
關(guān)于幾個(gè)值唠亚，除了名字链方，動畫時(shí)間，延時(shí)有嚴(yán)格順序要求其它隨意r
~~~css
@keyframes 動畫名稱 {
? from{ 開始位置 }? 0%
? to{? 結(jié)束? }? 100%
}
~~~
~~~
animation-iteration-count:infinite;? 無限循環(huán)播放
animation-play-state:paused;? 暫停動畫"
~~~
伸縮布局（css3)
主軸：Flex容器的主軸主要用來配置Flex項(xiàng)目灶搜，默認(rèn)是水平方向祟蚀。
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)值垂直方向割卖。
方向：默認(rèn)主軸從左往右前酿，側(cè)軸默認(rèn)從上往下。
主軸和側(cè)軸并不是固定不變的鹏溯，通過flex-diretion可以互換
各屬性詳解
1.flex子項(xiàng)目在主軸的縮放比例罢维，不指定flex屬性，則不參與伸縮分配丙挽。
min-width:最小值言津。
max-width:1280px, 最大寬度
2.flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）
flex-direction:column 垂直排列
flex-direction:row 水平排列
3.justify-content調(diào)整主軸對齊
4.align-items調(diào)整側(cè)軸對齊
5.flex-wrap控制是否換行
6.align-content堆棧（由flex-wrap產(chǎn)生的獨(dú)立行）對齊
align-content是針對flex容器里面多軸（多行）的情況攻人，align-items是針對一行的情況進(jìn)行排列。
必須對父元素設(shè)置自由盒屬性display:flex,并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行悬槽，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會起作用。
7.flex-flow是flex-direction瞬浓、flex-wrap的簡寫初婆。
flex-flow:flex-direction?flex-wrap;
8.order控制子項(xiàng)目的排列順序，正序方式排序猿棉，從小到大磅叛。
用css來控制盒子的前后順序。用order就可以了萨赁。
用整數(shù)值來定義排列順序弊琴，數(shù)值小的排在前面≌人可以為負(fù)值敲董。默認(rèn)值是0
order:1;
##BFC(塊級格式化上下文)
BFC它是一個(gè)獨(dú)立的渲染區(qū)域，只有block-level box參與慰安，它規(guī)定了內(nèi)部的block-level box如何布局腋寨，并且與這個(gè)區(qū)域外部毫不相干。
1.1元素的顯示模式
前面講過元素的顯示模式display化焕。分為塊級元素 行內(nèi)元素 行內(nèi)塊元素萄窜，其實(shí)，它還有很多其他顯示模式撒桨。
1.2哪些元素會具有BFC的條件
不是所有的元素模式都能產(chǎn)生BFC,W3C規(guī)范：
display屬性為block, list-item, table的元素查刻，會產(chǎn)生BFC.
大家有沒有發(fā)現(xiàn)這三個(gè)都是用來布局最為合理的元素，因?yàn)樗麄兙褪怯脕砜梢暬季帧?/p>
注意其他的凤类，display屬性穗泵，比如line等等，他們創(chuàng)建的是IFC踱蠢，
這個(gè)BFC有著具體的布局特性：
1.3什么情況下可以讓元素產(chǎn)生BFC
給元素添加如下屬性就可以觸發(fā)BFC:
-float屬性不為none。
-position為absolute或fixed茎截。
-display為inline-block, table-cell, table-caption, flex, inline-flex苇侵。
-overflow不為visible。
1.4BFC元素所具有的特性
BFC布局規(guī)則特性：
1.在BFC中企锌，盒子從頂端開始垂直的一個(gè)接一個(gè)的排列榆浓。
2.在盒子垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會發(fā)生重疊撕攒。
3.在BFC中陡鹃，每一個(gè)盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）(對于從右到左的格式來說烘浦，則觸碰到右邊緣)。
4.BFC的區(qū)域不會與浮動盒子產(chǎn)生交集萍鲸。
5.計(jì)算BFC的高度時(shí)闷叉，自然也會檢測浮動的盒子高度。
它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level box如何布局榄鉴，并且與這個(gè)區(qū)域外部毫不相干像寒。
1.5BFC的主要用途
BFC能用來做什么？
（1）清除元素內(nèi)部浮動
只要把父元素設(shè)置為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設(shè)置overflow：hidden樣式，對于IE6加上zoom:1就可以了。
（2）解決外邊距合并問題
外邊距合并的問題
屬于同一個(gè)BFC的兩個(gè)相鄰的盒子的margin會發(fā)生重疊萄传，那么我們創(chuàng)建不屬于同一個(gè)BFC,就不會發(fā)生重疊了。
（3）制作右側(cè)自適應(yīng)的盒子問題
普通流體元素BFC后蜜猾，為了和浮動元素不產(chǎn)生任何交集秀菱，順著浮動邊緣形成自己的封閉上下文。
1.6BFC總結(jié)
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器瓣铣，容器里面的子元素不會影響到外面的元素答朋。反之也如此。包括浮動和外邊距合并等等棠笑，因此梦碗，有了這個(gè)特性，我們布局的時(shí)候就不會出現(xiàn)意外情況了蓖救。
2.nav導(dǎo)航欄所用知識點(diǎn)
3.瀏覽器前綴
4.背景漸變
在線性漸變過程中洪规，顏色沿著一條直線過渡：從左側(cè)到右側(cè)、從右側(cè)到左側(cè)循捺、從頂部到底部斩例、從底部到頂部或者沿任何任意軸。
兼容性問題很嚴(yán)重从橘，我們這里只講解線性漸變念赶。
語法格式：
