CSS

# 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>

```

![image-20201223152737197](css.assets/image-20201223152737197.png)

### 繼承性

- 繼承性是指當(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>

```

![image-20201223152904867](css.assets/image-20201223152904867.png)

### 優(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)注的屬性疼电。[![image](css.assets/1053079-20180501154823992-2001739410.png)](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ú)立的斯棒。[![image](css.assets/1053079-20180501154824593-1122794927.png)](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>

```

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末笛钝,一起剝皮案震驚了整個(gè)濱河市质况,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌玻靡,老刑警劉巖结榄,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異囤捻,居然都是意外死亡臼朗,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蝎土,熙熙樓的掌柜王于貴愁眉苦臉地迎上來视哑,“玉大人,你說我怎么就攤上這事誊涯〉惨悖” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵暴构,是天一觀的道長跪呈。 經(jīng)常有香客問我,道長取逾,這世上最難降的妖魔是什么耗绿? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮砾隅,結(jié)果婚禮上误阻,老公的妹妹穿的比我還像新娘。我一直安慰自己晴埂,他們只是感情好堕绩,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著邑时,像睡著了一般奴紧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晶丘,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天黍氮,我揣著相機(jī)與錄音,去河邊找鬼浅浮。 笑死沫浆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的滚秩。 我是一名探鬼主播专执,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼郁油!你這毒婦竟也來了本股?” 一聲冷哼從身側(cè)響起攀痊,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拄显,沒想到半個(gè)月后苟径,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡躬审,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年棘街,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片承边。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡遭殉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出博助,到底是詐尸還是另有隱情恩沽,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布翔始,位于F島的核電站,受9級(jí)特大地震影響里伯,放射性物質(zhì)發(fā)生泄漏城瞎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一疾瓮、第九天 我趴在偏房一處隱蔽的房頂上張望脖镀。 院中可真熱鬧,春花似錦狼电、人聲如沸蜒灰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽强窖。三九已至,卻和暖如春削祈,著一層夾襖步出監(jiān)牢的瞬間翅溺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工髓抑, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留咙崎,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓吨拍,卻偏偏與公主長得像褪猛,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子羹饰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 課程目標(biāo): 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握C...
    前端陳陳陳閱讀 278評(píng)論 0 1
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,319評(píng)論 2 66
  • 1.1CSS 基礎(chǔ)與選擇器初識(shí) | CSS 1. CSS 加載方式有幾種伊滋? CSS樣式加載一共有四種方式: 1碳却、行...
    沒糖_cristalle閱讀 735評(píng)論 0 0
  • # CSS樣式規(guī)則overflow 使用HTML時(shí),需要遵從一定的規(guī)范新啼。CSS亦如此追城,要想熟練地使用CSS對(duì)網(wǎng)頁進(jìn)...
    低調(diào)迷人的反派角色閱讀 1,013評(píng)論 0 1
  • 學(xué)習(xí)目標(biāo): > 1. 學(xué)會(huì)使用CSS選擇器 > 2. 熟記CSS樣式和外觀屬性 > 3. 熟練掌握CSS各種選擇器...
    ZPNGU閱讀 1,216評(píng)論 0 0