# CSS
## 概述
- CSS 指層疊樣式表 (*C*ascading *S*tyle *S*heets)
- 樣式定義*如何顯示* HTML 元素
- 樣式通常存儲(chǔ)在*樣式表*中
- 把樣式添加到 HTML 4.0 中况鸣，是為了解決內(nèi)容與表現(xiàn)分離的問題
- *外部樣式表*可以極大提高工作效率
- 外部樣式表通常存儲(chǔ)在 *CSS 文件*中
- 多個(gè)樣式定義可*層疊*為一
## CSS樣式
### 行內(nèi)樣式
應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁元素
```HTML
<p style="background: red">
? ? I love China!
</p>
```
### 內(nèi)頁樣式
再網(wǎng)頁上創(chuàng)建嵌入的樣式表
```HTML
<head>
? ? <style type="text/css">
? ? ? ? p {background: green;}
? ? </style>
</head>
<body>
? ? <p> I love China!</p>
</body>
```
### 外部樣式
將網(wǎng)頁連接到外部樣式表
1. 建立一個(gè)css文件
2. 在`HTML`文件的`<head>`中寫`<link rel="stylesheet" href="stule.css">`
3. 在css中編寫
```HTML
<link rel="stylesheet" href="code.css">
```
## CSS3 選擇器
在 CSS 中验靡，選擇器是一種模式撮躁，用于選擇需要添加樣式的元素。
"CSS" 列指示該屬性是在哪個(gè) CSS 版本中定義的柔袁。
|? ? ? ? ? ? ? ? ? 選擇器? ? ? ? ? ? ? ? ? |? ? ? ? 例子? ? ? ? ? |? ? ? ? ? ? ? ? ? ? ? 例子描述? ? ? ? ? ? ? ? ? ? ? | CSS? |
| :--------------------------------------: | :-------------------: | :-------------------------------------------------: | :--- |
|? ? <font color='red'>.class</font>? ? ? |? ? ? ? .intro? ? ? ? |? ? ? ? ? 選擇 class="intro" 的所有元素。? ? ? ? ? | 1? ? |
|? ? ? <font color='red'>#id</font>? ? ? |? ? ? #firstname? ? ? |? ? ? ? ? 選擇 id="firstname" 的所有元素。? ? ? ? ? | 1? ? |
|? ? ? ? <font color='red'>*</font>? ? ? ? |? ? ? ? ? *? ? ? ? ? |? ? ? ? ? ? ? ? ? 選擇所有元素狞山。? ? ? ? ? ? ? ? ? ? | 2? ? |
|? ? <font color='red'>element</font>? ? |? ? ? ? ? p? ? ? ? ? |? ? ? ? ? ? ? ? 選擇所有 <p> 元素走芋。? ? ? ? ? ? ? ? | 1? ? |
| <font color='red'>element,element</font> |? ? ? ? div,p? ? ? ? |? ? ? ? 選擇所有 <div> 元素和所有 <p> 元素绩郎。? ? ? ? | 1? ? |
| <font color='red'>element element</font> |? ? ? ? div p? ? ? ? |? ? ? ? 選擇 <div> 元素內(nèi)部的所有 <p> 元素潘鲫。? ? ? ? | 1? ? |
| <font color='red'>element>element</font> |? ? ? ? div>p? ? ? ? |? ? ? 選擇父元素為 <div> 元素的所有 <p> 元素。? ? ? | 2? ? |
| <font color='red'>element+element</font> |? ? ? ? div+p? ? ? ? |? ? 選擇緊接在 <div> 元素之后的所有 <p> 元素肋杖。? ? ? | 2? ? |
|? ? ? ? ? ? ? [*attribute*\]? ? ? ? ? ? ? |? ? ? [target]? ? ? ? |? ? ? ? ? 選擇帶有 target 屬性所有元素溉仑。? ? ? ? ? ? | 2? ? |
|? ? ? ? ? [*attribute*=*value*\]? ? ? ? ? |? ? [target=_blank]? ? |? ? ? ? ? 選擇 target="_blank" 的所有元素。? ? ? ? ? | 2? ? |
|? ? ? ? [*attribute*~=*value*\]? ? ? ? ? |? ? [title~=flower]? ? |? ? 選擇 title 屬性包含單詞 "flower" 的所有元素状植。? ? | 2? ? |
|? ? ? ? [*attribute*\|=*value*\]? ? ? ? |? ? ? [lang\|=en]? ? ? |? ? ? 選擇 lang 屬性值以 "en" 開頭的所有元素浊竟。? ? ? | 2? ? |
|? ? ? <font color='red'>:link</font>? ? ? |? ? ? ? a:link? ? ? ? |? ? ? ? ? ? ? 選擇所有未被訪問的鏈接。? ? ? ? ? ? ? | 1? ? |
|? ? <font color='red'>:visited</font>? ? |? ? ? a:visited? ? ? |? ? ? ? ? ? ? 選擇所有已被訪問的鏈接津畸。? ? ? ? ? ? ? | 1? ? |
|? ? <font color='red'>:active</font>? ? |? ? ? a:active? ? ? ? |? ? ? ? ? ? ? ? ? 選擇活動(dòng)鏈接振定。? ? ? ? ? ? ? ? ? ? | 1? ? |
|? ? <font color='red'>:hover</font>? ? ? |? ? ? ? a:hover? ? ? ? |? ? ? ? ? ? 選擇鼠標(biāo)指針位于其上的鏈接。? ? ? ? ? ? | 1? ? |
|? ? <font color='red'>:focus</font>? ? ? |? ? ? input:focus? ? ? |? ? ? ? ? ? 選擇獲得焦點(diǎn)的 input 元素肉拓。? ? ? ? ? ? | 2? ? |
|? ? ? ? ? ? ? :first-letter? ? ? ? ? ? ? |? ? p:first-letter? ? |? ? ? ? ? ? 選擇每個(gè) <p> 元素的首字母后频。? ? ? ? ? ? | 1? ? |
|? ? ? ? ? ? ? :first-line? ? ? ? ? ? ? ? |? ? p:first-line? ? ? |? ? ? ? ? ? ? 選擇每個(gè) <p> 元素的首行。? ? ? ? ? ? ? | 1? ? |
|? ? ? ? ? ? ? :first-child? ? ? ? ? ? ? |? ? p:first-child? ? |? ? 選擇屬于父元素的第一個(gè)子元素的每個(gè) <p> 元素暖途。? ? | 2? ? |
|? ? ? ? ? ? ? ? :before? ? ? ? ? ? ? ? ? |? ? ? p:before? ? ? ? |? ? ? ? 在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容卑惜。? ? ? ? | 2? ? |
|? ? ? ? ? ? ? ? ? :after? ? ? ? ? ? ? ? ? |? ? ? ? p:after? ? ? ? |? ? ? ? 在每個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容。? ? ? ? | 2? ? |
|? ? ? ? ? ? :lang(*language*)? ? ? ? ? ? |? ? ? p:lang(it)? ? ? | 選擇帶有以 "it" 開頭的 lang 屬性值的每個(gè) <p> 元素驻售。 | 2? ? |
|? ? ? ? ? *element1*~*element2*? ? ? ? ? |? ? ? ? p~ul? ? ? ? ? |? ? ? ? 選擇前面有 <p> 元素的每個(gè) <ul> 元素露久。? ? ? ? | 3? ? |
|? ? ? ? [*attribute*^=*value*\]? ? ? ? ? |? ? a[src^="https"]? ? |? 選擇其 src 屬性值以 "https" 開頭的每個(gè) <a> 元素。? | 3? ? |
|? ? ? ? [*attribute*$=*value*\]? ? ? ? ? |? ? a[src$=".pdf"]? ? |? 選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素芋浮。? ? | 3? ? |
|? ? ? ? [*attribute**=*value*\]? ? ? ? ? |? ? a[src*="abc"]? ? |? 選擇其 src 屬性中包含 "abc" 子串的每個(gè) <a> 元素抱环。? | 3? ? |
|? ? ? ? ? ? ? :first-of-type? ? ? ? ? ? ? |? ? p:first-of-type? ? |? 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。? | 3? ? |
|? ? ? ? ? ? ? :last-of-type? ? ? ? ? ? ? |? ? p:last-of-type? ? |? 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素纸巷。? | 3? ? |
|? ? ? ? ? ? ? :only-of-type? ? ? ? ? ? ? |? ? p:only-of-type? ? |? 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素镇草。? | 3? ? |
|? ? ? ? ? ? ? :only-child? ? ? ? ? ? ? ? |? ? p:only-child? ? ? |? ? 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。? ? | 3? ? |
|? ? ? ? ? ? :nth-child(*n*)? ? ? ? ? ? ? |? ? p:nth-child(2)? ? |? 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素瘤旨。? | 3? ? |
|? ? ? ? ? :nth-last-child(*n*)? ? ? ? ? |? p:nth-last-child(2)? |? ? ? ? ? 同上梯啤，從最后一個(gè)子元素開始計(jì)數(shù)。? ? ? ? ? | 3? ? |
|? ? ? ? ? ? :nth-of-type(*n*)? ? ? ? ? ? |? p:nth-of-type(2)? ? |? 選擇屬于其父元素第二個(gè) <p> 元素的每個(gè) <p> 元素存哲。? | 3? ? |
|? ? ? ? ? :nth-last-of-type(*n*)? ? ? ? ? | p:nth-last-of-type(2) |? ? ? ? 同上因宇，但是從最后一個(gè)子元素開始計(jì)數(shù)。? ? ? ? | 3? ? |
|? ? ? ? ? ? ? :last-child? ? ? ? ? ? ? ? |? ? p:last-child? ? ? |? ? 選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素祟偷。? ? | 3? ? |
|? ? ? ? ? ? ? ? ? :root? ? ? ? ? ? ? ? ? |? ? ? ? :root? ? ? ? |? ? ? ? ? ? ? ? 選擇文檔的根元素察滑。? ? ? ? ? ? ? ? ? | 3? ? |
|? ? ? ? ? ? ? ? ? :empty? ? ? ? ? ? ? ? ? |? ? ? ? p:empty? ? ? ? |? 選擇沒有子元素的每個(gè) <p> 元素（包括文本節(jié)點(diǎn)）。? | 3? ? |
|? ? ? ? ? ? ? ? :target? ? ? ? ? ? ? ? ? |? ? #news:target? ? ? |? ? ? ? ? ? 選擇當(dāng)前活動(dòng)的 #news 元素修肠。? ? ? ? ? ? | 3? ? |
|? ? ? ? ? ? ? ? :enabled? ? ? ? ? ? ? ? |? ? input:enabled? ? |? ? ? ? ? ? 選擇每個(gè)啟用的 <input> 元素贺辰。? ? ? ? ? ? | 3? ? |
|? ? ? ? ? ? ? ? :disabled? ? ? ? ? ? ? ? |? ? input:disabled? ? |? ? ? ? ? ? 選擇每個(gè)禁用的 <input> 元素? ? ? ? ? ? | 3? ? |
|? ? ? ? ? ? ? ? :checked? ? ? ? ? ? ? ? |? ? input:checked? ? |? ? ? ? ? 選擇每個(gè)被選中的 <input> 元素。? ? ? ? ? | 3? ? |
|? ? ? ? ? ? :not(*selector*)? ? ? ? ? ? |? ? ? ? :not(p)? ? ? ? |? ? ? ? ? ? 選擇非 <p> 元素的每個(gè)元素。? ? ? ? ? ? | 3? ? |
|? ? ? ? ? ? ? ::selection? ? ? ? ? ? ? ? |? ? ? ::selection? ? ? |? ? ? ? ? ? 選擇被用戶選取的元素部分饲化。? ? ? ? ? ? ? | 3? ? |
## CSS三大特性
### 層疊性
層疊性是指當(dāng)一個(gè)標(biāo)簽被設(shè)置了多個(gè)重復(fù)的樣式的時(shí)候莽鸭，一個(gè)屬性會(huì)覆蓋另外一個(gè)屬性。
層疊性主要遵循的原則是<font color='red'>就近原則</font>吃靠，在不考慮優(yōu)先級(jí)的情況下硫眨，在多個(gè)樣式中最終生效的樣式是離標(biāo)簽最近的樣式。這里要注意<font color='red'>只覆蓋同樣的不可重復(fù)的樣式屬性巢块，不會(huì)覆蓋不重復(fù)的屬性礁阁，不重復(fù)的屬性會(huì)合并下來</font>
```HTML
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>Document</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? ? ? div{
? ? ? ? ? ? background-color: blue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>123</div>? <!-- 最終背景顏色是藍(lán)色 -->
? ? <div style="background-color: green;">123</div>? <!-- 最終背景顏色是綠色 -->
</body>
</html>
```
### 繼承性
- 繼承性是指當(dāng)子標(biāo)簽沒有設(shè)置樣式時(shí)，會(huì)繼承父標(biāo)簽的樣式夕冲。
- 比如一個(gè)子標(biāo)簽沒有設(shè)置背景顏色氮兵，那么子標(biāo)簽會(huì)繼承父標(biāo)簽的背景顏色。
可繼承的屬性比如有<font color='red'>字體類屬性</font>（字體顏色歹鱼、字體大小之類的）泣栈、<font color='red'>文本類屬性</font>（行高之類的）、<font color='red'>背景類屬性</font>（背景顏色之類的）（要注意<font color='red'>子標(biāo)簽不會(huì)繼承父標(biāo)簽的寬度弥姻、高度南片、邊距屬性</font>）
```HTML
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>Document</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? font-size:70px;
? ? ? ? ? ? background-color: #CCC;
? ? ? ? ? ? color:skyblue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>
? ? ? ? <p>p繼承div的樣式</p>
? ? </div>
</body>
</html>
```
### 優(yōu)先級(jí)
- 優(yōu)先級(jí)：<font color='red'>!important>行內(nèi)樣式>id選擇器>類選擇器>標(biāo)簽選擇器>通配符>繼承 </font>【優(yōu)先級(jí)高的規(guī)則會(huì)忽視層疊性，忽視就近原則來定義樣式庭敦。比如定義了!important疼进，即使行內(nèi)樣式離得近，最終生效的還是!important標(biāo)注的屬性】
- - !important是css的一種語法秧廉，定義在樣式屬性后面伞广，代表這個(gè)屬性不會(huì)被覆蓋，最終生效的屬性一定是!important標(biāo)注的屬性疼电。[](https://images2018.cnblogs.com/blog/1053079/201805/1053079-20180501154823658-883822458.png)
```HTML
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>Document</title>
? ? <style>
? ? ? ? /* 從上到下嚼锄，依次注釋選擇器來測試優(yōu)先級(jí) */
? ? ? ? div{
? ? ? ? ? ? color:green!important;
? ? ? ? }
? ? ? ? #id1{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? ? ? .class{
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? ? ? div{
? ? ? ? ? ? color:purple;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>!import優(yōu)先級(jí)</div>
? ? <div style="color:red">行內(nèi)樣式優(yōu)先級(jí)</div>
? ? <div id="id1">id選擇器優(yōu)先級(jí)</div>
? ? <div class="c1">類選擇器優(yōu)先級(jí)</div>
? ? <div>標(biāo)簽選擇器優(yōu)先級(jí)</div>
</body>
</html>
```
#### 權(quán)重計(jì)算方法
##### 規(guī)則
- 權(quán)重使用四個(gè)數(shù)字來衡量(x,x,x,x)【CSS2使用三位】
- 繼承的權(quán)重為<font color='orange'>(0,0,0,0)</font>
- 標(biāo)簽選擇器的權(quán)重為<font color='orange'>(0,0,0,1)</font>
- 類、偽類選擇器的權(quán)重為<font color='orange'>(0,0,1,0)</font>
- id選擇器選擇器的權(quán)重為<font color='orange'>(0,1,0,0)</font>
- 行內(nèi)樣式的權(quán)重為<font color='orange'>(1,0,0,0)</font>
- <font color='orange'>!important</font>的權(quán)重?zé)o限大
##### 計(jì)算方法
- 多個(gè)選擇器混雜時(shí)蔽豺，權(quán)重之和也是用四個(gè)數(shù)字來組成区丑，每一位的值為多個(gè)選擇器四個(gè)數(shù)字的每位之和，比如<font color='orange'>div:first-child</font>的權(quán)重為<font color='orange'>(0,0,0,1)+(0,0,1,0)=(0,0,1,1)</font>修陡，比如<font color='orange'>div ul li </font>為<font color='orange'>(0,0,0,3)</font>,比如<font color='orange'>a:hover</font>為<font color='orange'>(0,0,1,1)</font>
- <font color='red'>權(quán)重之和的數(shù)制是不會(huì)進(jìn)位的沧侥，再多的標(biāo)簽選擇器權(quán)重加和也抵不過一個(gè)類選擇器。</font>
- 多個(gè)選擇器之間的順序是無關(guān)的魄鸦，不影響權(quán)重之和宴杀。
- 對(duì)于并集選擇器來說不是權(quán)重的加和，因?yàn)槔碚撋纤€是獨(dú)立的拾因，它只相當(dāng)于將多個(gè)選擇器的相同內(nèi)容歸于一個(gè)并集選擇器中旺罢，理論上每一個(gè)選擇器還是獨(dú)立的斯棒。[](https://images2018.cnblogs.com/blog/1053079/201805/1053079-20180501154824334-1990617461.png)
## CSS常用單位
### px
px 是圖像顯示的基本單元，是 viewport 像素主经，是相對(duì)單位。同樣都是 1px庭惜，在不同設(shè)備上的顯示有可能是不一樣的罩驻。
### rem
rem 是相對(duì)于根元素 `<html>` 的 font-size 來計(jì)算的，比如說你設(shè)置了<font color='orange'>1.2rem</font>护赊，根元素的<font color='orange'>font-size是100px</font>惠遏，那么這個(gè)元素動(dòng)態(tài)算出來的px數(shù)就是120px。不同寬度骏啰，設(shè)置不同px节吮，這樣就可以適配所有寬度的設(shè)備了。
###? em
em 是相對(duì)于父元素的 font-size 來計(jì)算的判耕。
###? vw透绩，vh，vmin壁熄，vmax
（1）vw帚豪、vh、vmin草丧、vmax 是一種視窗單位狸臣，也是相對(duì)單位。是由視窗（Viewport）大小來決定的昌执，單位 1烛亦，代表類似于 1%。
視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域（不包括工具欄和按鈕）懂拾。
（2）具體描述如下：
- vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
- vh：視窗高度的百分比
- vmin：當(dāng)前 vw 和 vh 中較小的一個(gè)值
- vmax：當(dāng)前 vw 和 vh 中較大的一個(gè)值
（3）vmin煤禽、vmax 用處
做移動(dòng)頁面開發(fā)時(shí)，如果使用 vw委粉、wh 設(shè)置字體大形厥Α（比如 5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的贾节。
由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh汁汗。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致栗涂。
（4）瀏覽器兼容性
? ? （1）桌面 PC
- Chrome：自 26 版起就完美支持（2013年2月）
- Firefox：自 19 版起就完美支持（2013年1月）
- Safari：自 6.1 版起就完美支持（2013年10月）
- Opera：自 15 版起就完美支持（2013年7月）
- IE：自 IE10 起（包括 Edge）到現(xiàn)在還只是部分支持（不支持 vmax知牌，同時(shí) vm 代替 vmin）
?? ? （2）移動(dòng)設(shè)備
- Android：自 4.4 版起就完美支持（2013年12月）
- iOS：自 iOS8 版起就完美支持（2014年9月）
（5）用途
- 設(shè)置元素的尺寸，字體大小
- 設(shè)置遮罩層的尺寸
###? 百分號(hào) %
% 是相對(duì)于父元素的尺寸來計(jì)算的斤程。
## 元素的常用屬性
### 1角寸、字體屬性：(font)
- **大小 ：font-size**
x-large (特大) xx-small;(極小) 一般中文用不到菩混， 還可以使用單位來表示：ps em rem
- **樣式：font-style**
oblique （偏斜體) italic(斜體) normal(正常)
-? **行高：line-height**
normal(正常) 單位：PX、EM
- **粗細(xì)：font-weight**
bold(粗體) lighter(細(xì)體) normal(正常) 還可使用數(shù)值100-900扁藕，定義由粗到細(xì)的字符沮峡。400 等同于 normal，而 700 等同于 bold亿柑。
-? **修飾：text-decoration**
underline(下劃線) overline(上劃線) line-through(刪除線) blink(閃爍)
常用字體： (font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sansserif, Verdana
### 2邢疙、背景屬性： (background)
- **背景顏色**
這個(gè)屬性接受任何合法的顏色值，
1望薄、三基色比例表示疟游， #RRGGBB，前兩位是紅色痕支，中間2位是綠色颁虐，后兩位是藍(lán)色，最小是0卧须，最 大是F另绩。
2、rgba表示方式故慈，rgb(255,0,0)或者rgb(100%,0,0)表示紅色板熊，可以傳第四個(gè)參數(shù)代表透明度
3、英文單詞 background-color: #FFFFFF background-color: rgb(255,0,0,.5) background-color: red
-? **圖片**
{background-image: url();}
- **重復(fù)**
{background-repeat: no-repeat;}
-? **滾動(dòng)**
background-attachment:
fixed(固定) scroll(滾動(dòng))
- **位置**
? background-position
? left(水平) top(垂直)
- **簡寫方法**
? {background:#000 url(..) repeat fixed left top;}
/簡寫·這個(gè)在閱讀代碼中經(jīng)常出現(xiàn)察绷，要認(rèn)真的研究/干签、
```css
body
{
? ? background-image:url('gradient2.png');
? ? background-repeat:repeat-x;
}
```
### 3、列表屬性： (List-style)
- **類型：list-style-type:**
? disc(圓點(diǎn)) circle;(圓圈) square(方塊) decimal;(數(shù)字) lower-roman(小羅碼數(shù)字) upper-roman ower-alpha（希臘 upper-alpha
- **位置：list-style-position **
? outside(外) inside
- **圖像：list-style-image:**
? url(..);
### 4拆撼、邊框?qū)傩裕?/p>
-? (**Border) 邊框類型：border-style**
? dotted(點(diǎn)線) dashed(虛線) solid（實(shí)線） double(雙線) groove(槽線) ridge(脊?fàn)? inset (凹陷) outset;
- **邊框?qū)挾龋篵order-width**
- **邊框顏色：border-color**
- **簡寫方法：border：1px solidcolor;**
### 5容劳、區(qū)塊屬性： (Block)
- **字間距 ：letter-spacing**
可以使用px等單位
- 端對(duì)齊：text-align
left;(左對(duì)齊) right;(右對(duì)齊) center(居中)
- **縮進(jìn)：text-indent**
? 數(shù)值px
- 垂直對(duì)齊 ：vertical-align: baseline
? (基線) sub(下標(biāo)) super;(下標(biāo)) top; text-top; middle; bottom; text-bottom;
- **詞間距：word-spacing**
? 數(shù)值
- **顯示：display（重要）**
? none(不顯示)
? inline(默認(rèn)：內(nèi)聯(lián)元素)
? block(塊)
? inline-block（行內(nèi)塊元素）
? list-item;(列表項(xiàng))
**塊級(jí)元素(block)特性：**
- 總是獨(dú)占一行，表現(xiàn)為另起一行開始闸度，而且其后的元素也必須另起一行顯示;
- 寬度(width)竭贩、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
**內(nèi)聯(lián)元素(inline)特性：**
- 和相鄰的內(nèi)聯(lián)元素在同一行;
- 寬度(width)莺禁、高度(height)留量、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的 top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;
**塊級(jí)元素主要有：**
- div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , ol , p , table , ul , li
**內(nèi)聯(lián)元素主要有：**
- a , i , img , input , select , span , strong ,textarea
### 6哟冬、盒子模型（box）
對(duì)于塊狀元素楼熄，多個(gè)元素套在一起就像幾個(gè)盒子套在一起，怎么緊湊的排版是個(gè)問題浩峡。
- **寬：width**
? 表示內(nèi)容區(qū)域的寬度
- **高：**
? height 表示內(nèi)容區(qū)域的寬度
- **外邊距：**
? margin margin-top： 本元素頂部距離上一個(gè)元素的距離
? margin-bottom：本元素低部距離上一個(gè)元素的距離
? margin-left：本元素左側(cè)部距離上一個(gè)元素的距離
? margin-right：本元素右側(cè)距離上一個(gè)元素的距離
? 合并寫： margin: 上 右 下 左 margin:10px 10px 10px 10px;
? 還可以是 margin: 上下 左右 margin:10px 10px;
? 左右居中 margin:0 auto; 或者 margin: auto;
? 垂直居中后邊說可岂。
- **內(nèi)邊距：padding**
padding-top：本元素頂部空出的距離
padding-bottom：本元素低部空出的距離
padding-left：本元素左側(cè)部空出的距離
padding-right：本元素右側(cè)空出的距離
合并寫： padding: 上 右 下 左 padding:10px 10px 10px 10px;
還可以是 padding: 上下 左右 padding:10px 10px;
- **box-sizing**：定義如何計(jì)算元素的寬度和高度:是否應(yīng)該包含填充和邊框
? 默認(rèn)情況下，元素的寬度和高度計(jì)算如下： width + padding + border =元素的實(shí)際寬度 height + padding + border =元素的實(shí)際高度 這意味著：當(dāng)您設(shè)置元素的寬度/高度時(shí)翰灾，元素通陈拼猓看起來比 您設(shè)置的大（因?yàn)樵氐倪吙蚝吞畛浔惶砑拥皆氐闹付▽挾?高度）稚茅。
? content-box：More Actionscontent-box這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng) 用到元素的內(nèi)容框平斩。在寬度和高度之外繪制元素的內(nèi)邊距和邊框亚享。
? border-box：元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定 的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度绘面。
? inherit：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值虹蒋。
### 7、定位屬性： (Position)
文檔流是指在網(wǎng)頁中將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流.(自 己的理解是從頭到尾按照文檔的順序飒货，該在什么位置就在什么位置，自上而下峭竣，自左到右的順序),這是普 通流的說法塘辅。
- **定位：Position: static：**
? 文檔流定位，默認(rèn)的皆撩。
? absolute：絕對(duì)定位
? relative;： 相對(duì)定位
? fixed: 固定定位
- **可見性：visibility**
? inherit（繼承父元素）;
? visible（可見）
? hidden（隱藏）
- **溢出：overflow visible**
? （可見） hidden（隱藏） scroll（滾動(dòng)）;
### 8扣墩、浮動(dòng)
#### （1）定義浮動(dòng)：float
left（左浮動(dòng)） right（右浮動(dòng)）
浮動(dòng)的問題
浮動(dòng)元素會(huì)脫離了文檔流，造成父元素的高度坍塌扛吞，所以包圍圖片和文本的 div 不占據(jù)空間呻惕。于是使用 了浮動(dòng)的元素，后邊緊跟其他元素會(huì)錯(cuò)亂滥比，就要清除浮動(dòng)亚脆。
#### （2）清除浮動(dòng)
1、通過屬性clear:both;達(dá)到清除浮動(dòng)的目的盲泛；
元素浮動(dòng)后濒持，只需要在浮動(dòng)元素添加多一個(gè)塊級(jí)元素，并添加clear: both;屬性寺滚，便可以達(dá)到清除浮動(dòng)的 目的柑营。
```html
<style type="text/css">
? ? li {
? ? ? ? list-style: none;
? ? ? ? height: 100px;
? ? ? ? width: 100px;
? ? ? ? float: left;
? ? ? ? background: red;
? ? ? ? margin-left: 20px;
? ? }
? ? ul{
? ? ? ? background: pink;
? ? }
</style>
<ul class="cc">
? ? <li></li>
? ? <li></li>
? ? <div style="clear: both;"></div>
</ul>
```
2、通過給父級(jí)元素添加偽類after村视，達(dá)到清除浮動(dòng)的目的官套；
這種方式也是使用clear: both;的方式達(dá)到效果，只是變相的使用了偽類after蚁孔，使得頁面結(jié)構(gòu)更簡潔奶赔，也 是常用的清理浮動(dòng)的方式。
```html
<style type="text/css">
? ? li {
? ? ? ? list-style: none;
? ? ? ? height: 100px;
? ? ? ? width: 100px;
? ? ? ? float: left;
? ? ? ? background: red;
? ? ? ? margin-left: 20px;
? ? }
? ? .cc:after {
? ? ? ? content: '';
? ? ? ? height: 0;
? ? ? ? line-height: 0;
? ? ? ? display: block;
? ? ? ? visibility: hidden;
? ? ? ? clear: both;
? ? }
? ? ul{
? ? ? ? background: pink;
? ? }
</style>
<ul class="cc">
? ? <li></li>
? ? <li></li>
</ul>
```
3勒虾、使用雙偽類纺阔；
此方式和三原理一樣，代碼更簡潔修然。
```html
<style type="text/css">
? ? li {
? ? ? ? list-style: none;
? ? ? ? height: 100px;
? ? ? ? width: 100px;
? ? ? ? float: left;
? ? ? ? background: red;
? ? ? ? margin-left: 20px;
? ? }
? ? .cc:after,
? ? .cc:before {
? ? ? ? content: "";
? ? ? ? display: block;
? ? ? ? clear: both;
? ? }
? ? ul {
? ? ? ? background: pink;
? ? }
</style>
<ul class="cc">
? ? <li></li>
? ? <li></li>
</ul>
```
