CSS層疊樣式表
CSS(Cascading Style Sheets) 沈跨，通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表）
- 主要用于設(shè)置 HTML頁面中的文本內(nèi)容（字體、大小商叹、對齊方式等）燕刻、圖片的外形（寬高、邊框樣式剖笙、邊距等）以及版面的布局和外觀顯示樣式卵洗。
- CSS以HTML為基礎(chǔ)，提供了豐富的功能弥咪，如字體过蹂、顏色、背景的控制及整體排版等聚至，而且還可以針對不同的瀏覽器設(shè)置不同的樣式酷勺。
1 引入CSS樣式表
行內(nèi)式（內(nèi)聯(lián)樣式）
行內(nèi)樣式、行間樣式.
是通過標(biāo)簽的style屬性來設(shè)置元素的樣式
- 其基本語法格式如下：
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
實(shí)際上任何HTML標(biāo)簽都擁有style屬性晚岭，用來設(shè)置行內(nèi)式鸥印。
- 注意：
- style其實(shí)就是標(biāo)簽的屬性
- 樣式屬性和值中間是
: - 多組屬性值之間用
;隔開。 - 只能控制當(dāng)前的標(biāo)簽和以及嵌套在其中的字標(biāo)簽坦报，造成代碼冗余
- 缺點(diǎn)：沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離
內(nèi)部樣式表（內(nèi)嵌樣式表）
內(nèi)嵌式
是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中库说，并且用style標(biāo)簽定義
<head>
<style type="text/CSS">
選擇器（選擇的標(biāo)簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
-
注意：
- style標(biāo)簽一般位于head標(biāo)簽中，當(dāng)然理論上他可以放在HTML文檔的任何地方片择。
- type="text/css" 在html5中可以省略潜的。
- 只能控制當(dāng)前的頁面
缺點(diǎn)：沒有徹底分離
外部樣式表（外鏈?zhǔn)剑?/h4>
鏈入式
是將所有的樣式放在一個或多個以.CSS為擴(kuò)展名的外部樣式表文件中，
通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
- 注意：
- link 是個單標(biāo)簽
- link標(biāo)簽需要放在head頭部標(biāo)簽中字管，并且指定link標(biāo)簽的三個屬性
| 屬性 | 作用 |
|---|---|
| rel | 定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系啰挪，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件嘲叔。 |
| type | 定義所鏈接文檔的類型亡呵，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表硫戈。我們都可以省略 |
| href | 定義所鏈接外部樣式表文件的URL锰什，可以是相對路徑，也可以是絕對路徑。 |
總結(jié)
| 樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
|---|---|---|---|---|
| 行內(nèi)樣式表 | 書寫方便汁胆，權(quán)重高 | 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個標(biāo)簽（少） |
| 內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多梭姓，強(qiáng)烈推薦 | 控制整個站點(diǎn)（多） |
2 CSS基礎(chǔ)選擇器
2.1 標(biāo)簽選擇器
標(biāo)簽選擇器（元素選擇器）是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類嫩码，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式誉尖。
作用：標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 比如所有的div標(biāo)簽 和 所有的 span標(biāo)簽
優(yōu)點(diǎn)：是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式
缺點(diǎn)：不能設(shè)計(jì)差異化樣式。
2.2 類選擇器
類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識铸题，后面緊跟類名.
優(yōu)點(diǎn)：可以為元素對象定義單獨(dú)或相同的樣式铡恕。 可以選擇一個或者多個標(biāo)簽
-
注意
- 類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名(自定義回挽，我們自己命名的)
- 長名稱或詞組可以使用中橫線來為選擇器命名没咙。
- 不要純數(shù)字、中文等命名千劈， 盡量使用英文字母來表示。
命名是我們通俗約定的牌捷，但是沒有規(guī)定必須用這些常用的命名墙牌。
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
2.3 類選擇器特殊用法- 多類名
我們可以給標(biāo)簽指定多個類名，從而達(dá)到更多的選擇目的暗甥。
注意：
- 各個類名中間用空格隔開喜滨。
- 多類名選擇器在后期布局比較復(fù)雜的情況下，還是較多使用的撤防。
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>
2.4 id選擇器
id選擇器使用#進(jìn)行標(biāo)識虽风，后面緊跟id名
元素的id值是唯一的，只能對應(yīng)于文檔中某一個具體的元素寄月。
用法基本和類選擇器相同辜膝。
id選擇器和類選擇器區(qū)別
- W3C標(biāo)準(zhǔn)規(guī)定痴怨，在同一個頁面內(nèi)汇竭，不允許有相同名字的id對象出現(xiàn)琼掠，但是允許相同名字的class海铆。
- 類選擇器（class） 好比人的名字赞哗， 是可以多次重復(fù)使用的洋丐， 比如 張偉 王偉 李偉 李娜
- id選擇器 好比人的身份證號碼滚停， 全中國是唯一的霉囚， 不得重復(fù)谭溉。 只能使用一次墙懂。
id選擇器和類選擇器最大的不同在于 使用次數(shù)上。
- 類選擇器我們在修改樣式中扮念，用的最多损搬。
- id選擇器一般用于頁面唯一性的元素身上，經(jīng)常和我們后面學(xué)習(xí)的javascript 搭配使用。
2.6 通配符選擇器
- 概念：通配符選擇器用
*號表示场躯， * 就是 選擇所有的標(biāo)簽 他是所有選擇器中作用范圍最廣的谈为，能匹配頁面中所有的元素。
例如下面的代碼踢关，使用通配符選擇器定義CSS樣式伞鲫，清除所有HTML標(biāo)記的默認(rèn)邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內(nèi)邊距*/
}
- 注意：會匹配頁面所有的元素签舞，降低頁面響應(yīng)速度秕脓，不建議隨便使用
2.7 基礎(chǔ)選擇器總結(jié)
| 選擇器 | 作用 | 缺點(diǎn) | 使用情況 | 用法 |
|---|---|---|---|---|
| 標(biāo)簽選擇器 | 可以選出所有相同的標(biāo)簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
| 類選擇器 | 可以選出1個或者多個標(biāo)簽 | 可以根據(jù)需求選擇 | 非常多 | .nav { color: red; } |
| id選擇器 | 一次只能選擇器1個標(biāo)簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標(biāo)簽 | 選擇的太多儒搭，有部分不需要 | 不推薦使用 | * {color: red;} |
3 CSS-文字文本樣式
3.1 font字體
font-size:大小
p {
font-size:20px;
}
- 可以使用相對長度單位吠架，也可以使用絕對長度單位。
- 相對長度單位比較常用搂鲫，推薦使用像素單位px傍药，絕對長度單位使用較少。
注意：
- 文字大小基本就用px了魂仍，其他單位很少使用
- 谷歌瀏覽器默認(rèn)的文字大小為16px
- 但是不同瀏覽器可能默認(rèn)顯示的字號大小不一致拐辽，我們盡量給一個明確值大小，不要默認(rèn)大小擦酌。一般給body指定整個頁面文字的大小
font-family:字體
p{ font-family:"微軟雅黑";}
- 網(wǎng)頁中常用的字體有宋體俱诸、微軟雅黑、黑體等赊舶，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑
- 可以同時指定多個字體睁搭，中間以逗號隔開，表示如果瀏覽器不支持第一個字體笼平，則會嘗試下一個园骆，直到找到合適的字體， 如果都沒有出吹，則以我們電腦默認(rèn)的字體為準(zhǔn)遇伞。
p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}
- 各種字體之間必須使用英文狀態(tài)下的逗號隔開。
- 中文字體需要加英文狀態(tài)下的引號捶牢，英文字體一般不需要加引號鸠珠。當(dāng)需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前秋麸。
- 如果字體名中包含空格渐排、#、$等符號灸蟆，則該字體必須加英文狀態(tài)下的單引號或雙引號驯耻，例如font-family: "Times New Roman";。
- 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示可缚。
Unicode字體
-
為什么使用 Unicode字體
- 在 CSS 中設(shè)置字體名稱霎迫，直接寫中文是可以的。但是在文件編碼（GB2312帘靡、UTF-8 等）不匹配時會產(chǎn)生亂碼的錯誤知给。
- xp 系統(tǒng)不支持 類似微軟雅黑的中文。
-
解決：
方案一： 你可以使用英文來替代描姚。 比如
font-family:"Microsoft Yahei"涩赢。-
方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱轩勘，瀏覽器是可以正確的解析的筒扒。
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示設(shè)置字體為“微軟雅黑”。
| 字體名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 新宋體 | NSimSun | \65B0\5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷體_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隸書 | LiSu | \96B6\4E66 |
| 幼園 | YouYuan | \5E7C\5706 |
| 華文細(xì)黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細(xì)明體 | MingLiU | \7EC6\660E\4F53 |
| 新細(xì)明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
為了照顧不同電腦的字體安裝問題绊寻，我們盡量只使用宋體和微軟雅黑中文字體
font-weight:字體粗細(xì)
- 在html中如何將字體加粗我們可以用標(biāo)簽來實(shí)現(xiàn)
- 使用 b 和 strong 標(biāo)簽是文本加粗花墩。
- 可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的澄步。
| 屬性值 | 描述 |
|---|---|
| normal | 默認(rèn)值（不加粗的） |
| bold | 定義粗體（加粗的） |
| 100~900 | 400 等同于 normal观游，而 700 等同于 bold 我們重點(diǎn)記住這句話 |
font-style:字體風(fēng)格
- 在html中如何將字體傾斜我們可以用標(biāo)簽來實(shí)現(xiàn)
- 字體傾斜除了用 i 和 em 標(biāo)簽，
- 可以使用CSS 來實(shí)現(xiàn)驮俗，但是CSS 是沒有語義的
font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體允跑、傾斜或正常字體王凑，其可用屬性值如下：
| 屬性 | 作用 |
|---|---|
| normal | 默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式 font-style: normal; |
| italic | 瀏覽器會顯示斜體的字體樣式聋丝。 |
注意：平時我們很少給文字加斜體索烹，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式弱睦。
font:綜合設(shè)置字體樣式
font屬性用于對字體樣式進(jìn)行綜合設(shè)置
- 基本語法格式如下：
選擇器 { font: font-style font-weight font-size/line-height font-family;}
- 注意：
- 使用font屬性時百姓，必須按上面語法格式中的順序書寫，不能更換順序况木，各個屬性以空格隔開垒拢。
- 其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性火惊，否則font屬性將不起作用求类。
font總結(jié)
| 屬性 | 表示 | 注意點(diǎn) |
|---|---|---|
| font-size | 字號 | 我們通常用的單位是px 像素，一定要跟上單位 |
| font-family | 字體 | 實(shí)際工作中按照團(tuán)隊(duì)約定來寫字體 |
| font-weight | 字體粗細(xì) | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數(shù)字不要跟單位 |
| font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
| font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現(xiàn) |
3.2 外觀屬性
color:文本顏色
| 表示表示 | 屬性值 |
|---|---|
| 預(yù)定義的顏色值 | red屹耐，green尸疆，blue，還有我們的御用色 pink |
| 十六進(jìn)制 | #FF0000，#FF6600寿弱，#29D794 |
| RGB代碼 | rgb(255,0,0)或rgb(100%,0%,0%) |
- 實(shí)際工作中犯眠，用16進(jìn)制的寫法是最多的，而且我們更喜歡簡寫方式比如 #f00 代表紅色
text-align:文本水平對齊方式
作用：text-align屬性用于設(shè)置文本內(nèi)容的水平對齊症革，相當(dāng)于html中的align對齊屬性
其可用屬性值如下：
| 屬性 | 解釋 |
|---|---|
| left | 左對齊（默認(rèn)值） |
| right | 右對齊 |
| center | 居中對齊 |
- 注意：是讓盒子里面的內(nèi)容水平居中筐咧， 而不是讓盒子居中對齊
line-height:行間距
作用：line-height屬性用于設(shè)置行間距，就是行與行之間的距離地沮，即字符的垂直間距嗜浮，一般稱為行高。
單位：line-height常用的屬性值單位有三種摩疑，分別為像素px危融，相對值em和百分比%，實(shí)際工作中使用最多的是像素px
技巧：一般情況下雷袋，行距比字號大7-8像素左右就可以了吉殃。
text-indent:首行縮進(jìn)
作用：text-indent屬性用于設(shè)置首行文本的縮進(jìn)，
-
屬性值
- 其屬性值可為不同單位的數(shù)值楷怒、em字符寬度的倍數(shù)蛋勺、或相對于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,
- 建議使用em作為設(shè)置單位鸠删。
1em 就是一個字的寬度 如果是漢字的段落抱完， 1em 就是一個漢字的寬度
p {
/*行間距*/
line-height: 25px;
/*首行縮進(jìn)2個字 em 1個em 就是1個字的大小*/
text-indent: 2em;
}
text-decoration 文本的裝飾
text-decoration 通常我們用于給鏈接修改裝飾效果
| 值 | 描述 |
|---|---|
| none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本刃泡。 取消下劃線（最常用） |
| underline | 定義文本下的一條線巧娱。下劃線 也是我們鏈接自帶的（常用） |
| overline | 定義文本上的一條線。（不用） |
| line-through | 定義穿過文本下的一條線烘贴。（不常用） |
CSS外觀屬性總結(jié)
| 屬性 | 表示 | 注意點(diǎn) |
|---|---|---|
| color | 顏色 | 我們通常用 十六進(jìn)制 比如 而且是簡寫形式 #fff |
| line-height | 行高 | 控制行與行之間的距離 |
| text-align | 水平對齊 | 可以設(shè)定文字水平的對齊方式 |
| text-indent | 首行縮進(jìn) | 通常我們用于段落首行縮進(jìn)2個字的距離 text-indent: 2em; |
| text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
4 CSS復(fù)合選擇器
4.1 后代選擇器
概念：后代選擇器又稱為包含選擇器
作用：用來選擇元素或元素組的子孫后代
其寫法就是把外層標(biāo)簽寫在前面禁添，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔桨踪，先寫父親爺爺老翘，在寫兒子孫子。
.class h3{color:red;font-size:16px;}
- 當(dāng)標(biāo)簽發(fā)生嵌套時锻离，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代铺峭。
- 子孫后代都可以這么選擇。 或者說纳账，它能選擇任何包含在內(nèi) 的標(biāo)簽逛薇。
4.2 子元素選擇器
作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標(biāo)簽寫在前面疏虫，子級標(biāo)簽寫在后面永罚，中間跟一個
>進(jìn)行連接
.class>h3{color:red;font-size:14px;}
這里的子 指的是 親兒子 不包含孫子 重孫子之類啤呼。
比如： .demo>h3{color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3呢袱。
4.3 交集選擇器
- 交集選擇器由兩個選擇器構(gòu)成官扣，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點(diǎn)，也有標(biāo)簽二的特點(diǎn)羞福。
p.one{color: red;} 選擇的是： 類名為 .one 的 段落標(biāo)簽惕蹄。
用的相對來說比較少，不太建議使用治专。
4.4 并集選擇器（重點(diǎn)）
如果某些選擇器定義的相同樣式卖陵，就可以利用并集選擇器，可以讓代碼更簡潔张峰。
并集選擇器（CSS選擇器分組）是各個選擇器通過
,連接而成的泪蔫，通常用于集體聲明。-
任何形式的選擇器（包括標(biāo)簽選擇器喘批、class類選擇器id選擇器等）撩荣，都可以作為并集選擇器的一部分。
并集選擇器通常用于集體聲明 饶深，用逗號隔開餐曹，所有選擇器都會執(zhí)行后面樣式，逗號可以理解為 和的意思敌厘。
.one, p, #test {color: #F00;}
表示 .one 和 p 和 #test 這三個選擇器都會執(zhí)行顏色為紅色台猴。
通常用于集體聲明。
4.5 鏈接偽類選擇器
偽類選擇器 ：
作用：用于向某些選擇器添加特殊的效果俱两。比如給鏈接添加特殊效果卿吐， 比如可以選擇 第1個，第n個元素锋华。
a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標(biāo)移動到鏈接上 */
a:active /* 選定的鏈接 */
注意
- 寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序箭窜。否則可能引起錯誤毯焕。
- 因?yàn)榻墟溄觽晤悾远际?利用交集選擇器 a:link a:hover
- 因?yàn)閍鏈接瀏覽器具有默認(rèn)樣式磺樱，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式纳猫。
- 實(shí)際工作開發(fā)中，我們很少寫全四個狀態(tài)竹捉，一般我們寫法如下：
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)過的時候芜辕，由原來的 灰色 變成了紅色 */
}
4.6 復(fù)合選擇器總結(jié)
| 選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 .nav a |
| 子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
| 交集選擇器 | 選擇兩個標(biāo)簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
| 并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
| 鏈接偽類選擇器 | 給鏈接更改狀態(tài) | 較多 | 重點(diǎn)記住 a{} 和 a:hover 實(shí)際開發(fā)的寫法 |
5. 標(biāo)簽顯示模式（display）重點(diǎn)
什么是標(biāo)簽的顯示模式？標(biāo)簽以什么方式進(jìn)行顯示块差，比如div 自己占一行侵续， 比如span 一行可以放很多個
作用： 我們網(wǎng)頁的標(biāo)簽非常多倔丈，再不同地方會用到不同類型的標(biāo)簽，以便更好的完成我們的網(wǎng)頁状蜗。
標(biāo)簽的類型(分類)：HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型需五，它們也稱塊元素和行內(nèi)元素。
5.1 塊級元素(block-level)
常見的塊元素有<h1>~<h6>轧坎、<p>宏邮、<div>、<ul>缸血、<ol>蜜氨、<li>等，其中<div>標(biāo)簽是最典型的塊元素捎泻。
塊級元素的特點(diǎn)
（1）比較霸道飒炎，自己獨(dú)占一行
（2）高度，寬度族扰、外邊距以及內(nèi)邊距都可以控制厌丑。
（3）寬度默認(rèn)是容器（父級寬度）的100%
（4）是一個容器及盒子，里面可以放行內(nèi)或者塊級元素渔呵。-
注意：
- 只有 文字才 能組成段落 因此 p 里面不能放塊級元素怒竿，特別是 p 不能放div
- 同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標(biāo)簽扩氢，里面不能放其他塊級元素耕驰。
5.2 行內(nèi)元素(inline-level)
常見的行內(nèi)元素有<a>、<strong>录豺、<b>朦肘、<em>、<i>双饥、<del>媒抠、<s>、<ins>咏花、<u>趴生、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素昏翰。有的地方也成內(nèi)聯(lián)元素
- 行內(nèi)元素的特點(diǎn)：
（1）相鄰行內(nèi)元素在一行上苍匆，一行可以顯示多個。
（2）高棚菊、寬直接設(shè)置是無效的浸踩。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素统求。
- 注意：
- 鏈接里面不能再放鏈接检碗。
- 特殊情況a里面可以放塊級元素据块，但是給a轉(zhuǎn)換一下塊級模式最安全。
5.3 行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個特殊的標(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)邊距都可以控制扶檐。
5.4 三種模式總結(jié)區(qū)別
| 元素模式 | 元素排列 | 設(shè)置樣式 | 默認(rèn)寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設(shè)置寬度高度 | 容器的100% | 容器級可以包含任何標(biāo)簽 |
| 行內(nèi)元素 | 一行可以放多個行內(nèi)元素 | 不可以直接設(shè)置寬度高度 | 它本身內(nèi)容的寬度 | 容納文本或則其他行內(nèi)元素 |
| 行內(nèi)塊元素 | 一行放多個行內(nèi)塊元素 | 可以設(shè)置寬度和高度 | 它本身內(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;
6. 行高（line-height）
6.1 單行文本垂直居中
行高我們利用最多的一個地方是： 可以讓單行文本在盒子中垂直居中對齊。
文字的行高等于盒子的高度款筑。
行高 = 上距離 + 內(nèi)容高度 + 下距離
上距離和下距離總是相等的智蝠，因此文字看上去是垂直居中的。
行高和高度的三種關(guān)系
- 如果 行高 等 高度 文字會 垂直居中
- 如果行高 大于 高度 文字會 偏下
- 如果行高小于高度 文字會 偏上
7. CSS 背景(background)
背景顏色(color)
background-color:顏色值; 默認(rèn)的值是 transparent 透明的
背景圖片(image)
background-image : none | url (url)
| 參數(shù) | 作用 |
|---|---|
| none | 無背景圖（默認(rèn)的） |
| url | 使用絕對或相對地址指定背景圖像 |
background-image : url(images/demo.png);
- 小技巧： 我們提倡 背景圖片后面的地址奈梳，url不要加引號杈湾。
背景平鋪（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 參數(shù) | 作用 |
|---|---|
| repeat | 背景圖像在縱向和橫向上平鋪（默認(rèn)的） |
| no-repeat | 背景圖像不平鋪 |
| repeat-x | 背景圖像在橫向上平鋪 |
| repeat-y | 背景圖像在縱向平鋪 |
背景位置(position) 重點(diǎn)
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 方位名詞 |
- 注意：
- 必須先指定background-image屬性
- position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位攘须。
- 如果指定兩個值漆撞，兩個值都是方位名字，則兩個值前后順序無關(guān)于宙，比如left top和top left效果一致
- 如果只指定了一個方位名詞臭墨，另一個值默認(rèn)居中對齊盗尸。
- 如果position 后面是精確坐標(biāo)费尽， 那么第一個用含，肯定是 x 第二的一定是y
- 如果只指定一個數(shù)值,那該數(shù)值一定是x坐標(biāo)，另一個默認(rèn)垂直居中
- 如果指定的兩個值是 精確單位和方位名字混合使用谱俭，則第一個值是x坐標(biāo)奋献，第二個值是y坐標(biāo)
實(shí)際工作用的最多的，就是背景圖片居中對齊旺上。
背景附著
- 背景附著就是解釋背景是滾動的還是固定的
background-attachment : scroll | fixed
| 參數(shù) | 作用 |
|---|---|
| scroll | 背景圖像是隨對象內(nèi)容滾動 |
| fixed | 背景圖像固定 |
背景簡寫
- background：屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性糖埋，建議大家如下寫：
- background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
- 最后一個參數(shù)是alpha 透明度 取值范圍 0~1之間
- 我們習(xí)慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明宣吱， 盒子里面的內(nèi)容不受影響
- 因?yàn)槭荂SS3 ，所以 低于 ie9 的版本是不支持的瞳别。
總結(jié)
| 屬性 | 作用 | 值 |
|---|---|---|
| background-color | 背景顏色 | 預(yù)定義的顏色值/十六進(jìn)制/RGB代碼 |
| background-image | 背景圖片 | url(圖片路徑) |
| background-repeat | 是否平鋪 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分別是x 和 y坐標(biāo)征候， 切記 如果有 精確數(shù)值單位杭攻，則必須按照先X 后Y 的寫法 |
| background-attachment | 背景固定還是滾動 | scroll/fixed |
| 背景簡寫 | 更簡單 | 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置; 他們沒有順序 |
| 背景透明 | 讓盒子半透明 | background: rgba(0,0,0,0.3); 后面必須是 4個值 |
8. CSS 三大特性
8.1 CSS層疊性
-
概念：所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設(shè)置到同一個元素上疤坝，那么這個時候一個屬性就會將另一個屬性層疊掉
-
原則：
- 樣式?jīng)_突兆解，遵循的原則是就近原則。 那個樣式離著結(jié)構(gòu)近跑揉，就執(zhí)行那個樣式锅睛。
- 樣式不沖突，不會層疊
8.2 CSS繼承性
概念：子標(biāo)簽會繼承父標(biāo)簽的某些樣式历谍，如文本顏色和字號现拒。
想要設(shè)置一個可繼承的屬性，只需將它應(yīng)用于父元素即可望侈。
-
注意：
- 恰當(dāng)?shù)厥褂美^承可以簡化代碼印蔬，降低CSS樣式的復(fù)雜性。比如有很多子級孩子都需要某個樣式脱衙，可以給父級指定一個侥猬，這些孩子繼承過來就好了。
- 子元素可以繼承父元素的樣式（text-捐韩，font-退唠，line-這些元素開頭的可以繼承，以及color屬性）
8.3 CSS優(yōu)先級
- 概念：定義CSS樣式時奥帘，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上铜邮，此時，
- 選擇器相同寨蹋，則執(zhí)行層疊性
- 選擇器不同松蒜，就會出現(xiàn)優(yōu)先級的問題。
1). 權(quán)重計(jì)算公式
關(guān)于CSS權(quán)重已旧，我們需要一套計(jì)算公式來去計(jì)算秸苗，這個就是 CSS Specificity（特殊性）
| 標(biāo)簽選擇器 | 計(jì)算權(quán)重公式 |
|---|---|
| 繼承或者 * | 0,0,0,0 |
| 每個元素（標(biāo)簽選擇器） | 0,0,0,1 |
| 每個類，偽類 | 0,0,1,0 |
| 每個ID | 0,1,0,0 |
| 每個行內(nèi)樣式 style="" | 1,0,0,0 |
| 每個!important 重要的 | ∞ 無窮大 |
- 值從左到右运褪，左面的最大惊楼，一級大于一級，數(shù)位之間沒有進(jìn)制秸讹，級別之間不可超越檀咙。
- 關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算璃诀，這個就是 CSS Specificity（特殊性）
- div { color: pink!important; }
2). 權(quán)重疊加
我們經(jīng)常用交集選擇器弧可，后代選擇器等，是有多個基礎(chǔ)選擇器組合而成劣欢，那么此時棕诵，就會出現(xiàn)權(quán)重疊加裁良。
就是一個簡單的加法計(jì)算
- 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
注意： 數(shù)位之間沒有進(jìn)制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況校套。
3). 繼承的權(quán)重是0
這個不難价脾，但是忽略很容易繞暈。其實(shí)笛匙，我們修改樣式侨把，一定要看該標(biāo)簽有沒有被選中。
1） 如果選中了膳算，那么以上面的公式來計(jì)權(quán)重座硕。誰大聽誰的。
2） 如果沒有選中涕蜂，那么權(quán)重是0华匾，因?yàn)槔^承的權(quán)重為0.
5 CSS盒子模型
5.1 邊框（border）
border : border-width || border-style || border-color
| 屬性 | 作用 |
|---|---|
| border-width | 定義邊框粗細(xì)，單位是px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
- 邊框的樣式：
- none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
- solid：邊框?yàn)閱螌?shí)線(最為常用的)
- dashed：邊框?yàn)樘摼€
- dotted：邊框?yàn)辄c(diǎn)線
邊框綜合設(shè)置
border: 1px solid red; 沒有順序
盒子邊框?qū)懛偨Y(jié)表
很多情況下机隙，我們不需要指定4個邊框蜘拉，我們是可以單獨(dú)給4個邊框分別指定的。
| 上邊框 | 下邊框 | 左邊框 | 右邊框 |
|---|---|---|---|
| border-top-style:樣式; | border-bottom-style:樣式; | border-left-style:樣式; | border-right-style:樣式; |
| border-top-width:寬度; | border- bottom-width:寬度; | border-left-width:寬度; | border-right-width:寬度; |
| border-top-color:顏色; | border- bottom-color:顏色; | border-left-color:顏色; | border-right-color:顏色; |
| border-top:寬度 樣式 顏色; | border-bottom:寬度 樣式 顏色; | border-left:寬度 樣式 顏色; | border-right:寬度 樣式 顏色; |
表格的細(xì)線邊框
通過表格的
cellspacing="0",將單元格與單元格之間的距離設(shè)置為0有鹿，但是兩個單元格之間的邊框會出現(xiàn)重疊旭旭，從而使邊框變粗
-
通過css屬性：
table{ border-collapse:collapse; } collapse 單詞是合并的意思
border-collapse:collapse; 表示相鄰邊框合并在一起。
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相鄰邊框*/
}
</style>
5.2 內(nèi)邊距（padding）
- padding屬性用于設(shè)置內(nèi)邊距葱跋。 是指 邊框與內(nèi)容之間的距離持寄。
設(shè)置
| 屬性 | 作用 |
|---|---|
| padding-left | 左內(nèi)邊距 |
| padding-right | 右內(nèi)邊距 |
| padding-top | 上內(nèi)邊距 |
| padding-bottom | 下內(nèi)邊距 |
當(dāng)我們給盒子指定padding值之后， 發(fā)生了2件事情：
- 內(nèi)容和邊框 有了距離娱俺，添加了內(nèi)邊距稍味。
- 盒子會變大了。
注意： 后面跟幾個數(shù)值表示的意思是不一樣的荠卷。
| 值的個數(shù) | 表達(dá)意思 |
|---|---|
| 1個值 | padding：上下左右內(nèi)邊距; |
| 2個值 | padding: 上下內(nèi)邊距 左右內(nèi)邊距 模庐； |
| 3個值 | padding：上內(nèi)邊距 左右內(nèi)邊距 下內(nèi)邊距； |
| 4個值 | padding: 上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 油宜； |
內(nèi)盒尺寸計(jì)算（元素實(shí)際大械嗉睢）
寬度: Element Height = content height + padding + border （Height為內(nèi)容高度）
高度: Element Width = content width + padding + border （Width為內(nèi)容寬度）
盒子的實(shí)際的大小 = 內(nèi)容的寬度和高度 + 內(nèi)邊距 + 邊框
內(nèi)邊距產(chǎn)生的問題
-
問題
31padding問題.png
會撐大原來的盒子
-
解決：
通過給設(shè)置了寬高的盒子，減去相應(yīng)的內(nèi)邊距的值慎冤，維持盒子原有的大小
32padding問題解決.png
padding不影響盒子大小情況
如果沒有給一個盒子指定寬度疼燥， 此時，如果給這個盒子指定padding蚁堤， 則不會撐開盒子醉者。
5.3 外邊距（margin）
- margin屬性用于設(shè)置外邊距。 margin就是控制盒子和盒子之間的距離
| 屬性 | 作用 |
|---|---|
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin值的簡寫 （復(fù)合寫法）代表意思 跟 padding 完全相同。
塊級盒子水平居中
- 可以讓一個塊級盒子實(shí)現(xiàn)水平居中必須：
- 盒子必須指定了寬度（width）
- 然后就給左右的外邊距都設(shè)置為auto湃交，
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
常見的寫法藤巢，以下下三種都可以搞莺。
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
文字居中和盒子居中區(qū)別
- 盒子內(nèi)的文字水平居中是 text-align: center, 而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對齊
- 塊級盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
margin: 10px auto; /* 塊級盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */
插入圖片和背景圖片區(qū)別
- 插入圖片 我們用的最多 比如產(chǎn)品展示類 移動位置只能靠盒模型 padding margin
- 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片 背景圖片 只能通過 background-position
img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
}
清除元素的默認(rèn)內(nèi)外邊距
為了更靈活方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時掂咒，我們需要將元素的默認(rèn)內(nèi)外邊距清除
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
- 注意：行內(nèi)元素為了照顧兼容性才沧， 盡量只設(shè)置左右內(nèi)外邊距， 不要設(shè)置上下內(nèi)外邊距绍刮。
外邊距合并
使用margin定義塊元素的垂直外邊距時温圆，可能會出現(xiàn)外邊距的合并。
(1). 相鄰塊元素垂直外邊距的合并
- 當(dāng)上下相鄰的兩個塊元素相遇時孩革，如果上面的元素有下外邊距margin-bottom
- 下面的元素有上外邊距margin-top岁歉，則他們之間的垂直間距不是margin-bottom與margin-top之和
-
取兩個值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
www.png
解決方案：盡量給只給一個盒子添加margin值膝蜈。
(2). 嵌套塊元素垂直外邊距的合并（塌陷）
- 對于兩個嵌套關(guān)系的塊元素锅移，如果父元素沒有上內(nèi)邊距及邊框
- 父元素的上外邊距會與子元素的上外邊距發(fā)生合并
-
合并后的外邊距為兩者中的較大者
n.png
解決方案：
- 可以為父元素定義上邊框。
- 可以為父元素定義上內(nèi)邊距
- 可以為父元素添加overflow:hidden饱搏。
盒子模型布局穩(wěn)定性
- 內(nèi)邊距和外邊距非剃，什么情況下用內(nèi)邊距，什么情況下用外邊距推沸？
- 大部分情況下是可以混用的备绽。 就是說，用內(nèi)邊距也可以鬓催，用外邊距也可以肺素。 哪個方便，就用哪個深浮。
根據(jù)穩(wěn)定性來分压怠，建議如下：
按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。
width > padding > margin
- 原因：
- margin 會有外邊距合并 還有 ie6下面margin 加倍的bug 所以最后使用飞苇。
- padding 會影響盒子大小菌瘫， 需要進(jìn)行加減計(jì)算 其次使用。
- width 沒有問題 我們經(jīng)常使用寬度剩余法 高度剩余法來做布卡。
6 浮動(float)
6.1 CSS 布局的三種機(jī)制
CSS 提供了 3 種機(jī)制來設(shè)置盒子的擺放位置雨让，分別是普通流（標(biāo)準(zhǔn)流）、浮動和定位忿等，其中：
-
普通流（標(biāo)準(zhǔn)流）
-
塊級元素會獨(dú)占一行栖忠，從上向下順序排列；
- 常用元素：div、hr庵寞、p狸相、h1~h6、ul捐川、ol脓鹃、dl、form古沥、table
-
行內(nèi)元素會按照順序瘸右，從左到右順序排列，碰到父元素邊緣則自動換行岩齿；
- 常用元素：span太颤、a、i盹沈、em等
-
塊級元素會獨(dú)占一行栖忠，從上向下順序排列；
-
浮動
- 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示龄章。
-
定位
- 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效襟诸。
6.2 什么是浮動(float)
概念：元素的浮動是指設(shè)置了浮動屬性的元素會
- 脫離標(biāo)準(zhǔn)普通流的控制
- 移動到指定位置瓦堵。
- 作用
- 讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段歌亲。
- 可以實(shí)現(xiàn)盒子的左右對齊等等..
- 浮動最早是用來控制圖片，實(shí)現(xiàn)文字環(huán)繞圖片的效果陷揪。
- 語法
在 CSS 中惋鸥，通過 float 中文， 浮 漏 特 屬性定義浮動悍缠，語法如下：
選擇器 { float: 屬性值; }
| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動（默認(rèn)值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
- 漂浮在普通流的上面卦绣。 脫離標(biāo)準(zhǔn)流。
float屬性會讓盒子漂浮在標(biāo)準(zhǔn)流的上面飞蚓，所以第二個標(biāo)準(zhǔn)流的盒子跑到浮動盒子的底下了滤港。 - 浮動的盒子，把自己原來的位置漏給下面標(biāo)準(zhǔn)流的盒子趴拧，就是不占有原來位置溅漾，是脫離標(biāo)準(zhǔn)流的，我們俗稱 “脫標(biāo)”著榴。
- float屬性會改變元素display屬性添履。任何元素都可以浮動。浮動元素會生成一個塊級框脑又，而不論它本身是何種元素暮胧。 生成的塊級框和我們前面的行內(nèi)塊極其相似锐借。
浮動(float)小結(jié)
我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因?yàn)檫@是我們最常見的一種布局方式
| 特點(diǎn) | 說明 |
|---|---|
| 浮 | 加了浮動的盒子是浮起來的往衷，漂浮在其他標(biāo)準(zhǔn)流盒子的上面钞翔。 |
| 漏 | 加了浮動的盒子是不占位置的，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子席舍。 |
| 特 | 特別注意：浮動元素會改變display屬性嗅战， 類似轉(zhuǎn)換為了行內(nèi)塊，但是元素之間沒有空白縫隙 |
6.3 浮動(float)的應(yīng)用
浮動和標(biāo)準(zhǔn)流的父盒子搭配
我們知道俺亮，浮動是脫標(biāo)的，會影響下面的標(biāo)準(zhǔn)流元素疟呐，此時脚曾，我們需要給浮動的元素添加一個標(biāo)準(zhǔn)流的父親，這樣启具，最大化的減小了對其他標(biāo)準(zhǔn)流的影響本讥。
1). 浮動元素與父盒子的關(guān)系
- 子盒子的浮動參照父盒子對齊
-
不會與父盒子的邊框重疊，也不會超過父盒子的內(nèi)邊距
05_父子盒子關(guān)系示意圖.png
2). 浮動元素與兄弟盒子的關(guān)系
在一個父級盒子中鲁冯，如果前一個兄弟盒子是：
- 浮動的拷沸，那么當(dāng)前盒子會與前一個盒子的頂部對齊；
- 普通流的薯演，那么當(dāng)前盒子會顯示在前一個兄弟盒子的下方撞芍。
浮動只會影響當(dāng)前的或者是后面的標(biāo)準(zhǔn)流盒子，不會影響前面的標(biāo)準(zhǔn)流跨扮。
如果一個盒子里面有多個子盒子序无，如果其中一個盒子浮動了，其他兄弟也應(yīng)該浮動衡创。防止引起問題
6.4 清除浮動
為什么要清除浮動
因?yàn)楦讣壓凶雍芏嗲闆r下帝嗡，不方便給高度，但是子盒子浮動就不占有位置璃氢，最后父級盒子高度為0哟玷，就影響了下面的標(biāo)準(zhǔn)流盒子。
- 總結(jié)：
- 由于浮動元素不再占用原文檔流的位置一也，所以它會對后面的元素排版產(chǎn)生影響
- 準(zhǔn)確地說巢寡，并不是清除浮動，而是清除浮動后造成的影響
清除浮動本質(zhì)
清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為0 的問題塘秦。清除浮動之后讼渊， 父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度尊剔，就不會影響下面的標(biāo)準(zhǔn)流了
清除浮動的方法
在CSS中爪幻，clear屬性用于清除浮動菱皆。
選擇器{clear:屬性值;} clear 清除
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響） |
| right | 不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響） |
| both | 同時清除左右兩側(cè)浮動的影響 |
但是我們實(shí)際工作中， 幾乎只用 clear: both;
1).額外標(biāo)簽法(隔墻法)
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標(biāo)簽例如 <div style=”clear:both”></div>挨稿，或則其他標(biāo)簽br等亦可仇轻。
- 優(yōu)點(diǎn)： 通俗易懂，書寫方便
- 缺點(diǎn)： 添加許多無意義的標(biāo)簽奶甘，結(jié)構(gòu)化較差篷店。
2).父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)。
- 優(yōu)點(diǎn)： 代碼簡潔
- 缺點(diǎn)： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉臭家，無法顯示需要溢出的元素疲陕。
3).使用after偽元素清除浮動
:after 方式為空元素額外標(biāo)簽法的升級版，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.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。
- 代表網(wǎng)站： 百度你踩、淘寶網(wǎng)诅岩、網(wǎng)易等
4).使用雙偽元素清除浮動
使用方法：
.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带膜。
代表網(wǎng)站： 小米吩谦、騰訊等
清除浮動總結(jié)
什么時候用清除浮動呢？
- 父級沒高度
- 子盒子浮動了
- 影響下面布局了膝藕，我們就應(yīng)該清除浮動了式廷。
| 清除浮動的方式 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| 額外標(biāo)簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標(biāo)簽芭挽，結(jié)構(gòu)化較差懒棉。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結(jié)構(gòu)語義化正確 | 由于IE6-7不支持:after览绿，兼容性問題 |
7 定位(position)
定位也是用來布局的策严，它有兩部分組成：
定位 = 定位模式 + 邊偏移
7.1 邊偏移
簡單說， 我們定位的盒子饿敲，是通過邊偏移來移動位置的妻导。
在 CSS 中，通過 top怀各、bottom倔韭、left 和 right 屬性定義元素的邊偏移：（方位名詞）
| 邊偏移屬性 | 示例 | 描述 |
|---|---|---|
top |
top: 80px |
頂端偏移量，定義元素相對于其父元素上邊線的距離瓢对。 |
bottom |
bottom: 80px |
底部偏移量寿酌，定義元素相對于其父元素下邊線的距離。 |
left |
left: 80px |
左側(cè)偏移量硕蛹，定義元素相對于其父元素左邊線的距離醇疼。 |
right |
right: 80px |
右側(cè)偏移量硕并，定義元素相對于其父元素右邊線的距離 |
定位的盒子有了邊偏移才有價值。 一般情況下秧荆，凡是有定位地方必定有邊偏移倔毙。
7.2 定位模式 (position)
在 CSS 中，通過 position 屬性定義元素的定位模式乙濒，語法如下：
選擇器 { position: 屬性值; }
定位模式是有不同分類的陕赃，在不同情況下，我們用到不同的定位模式颁股。
| 值 | 語義 |
|---|---|
static |
靜態(tài)定位 |
relative |
相對定位 |
absolute |
絕對定位 |
fixed |
固定定位 |
7.2.1 靜態(tài)定位(static) - 了解
- 靜態(tài)定位是元素的默認(rèn)定位方式么库，無定位的意思。它相當(dāng)于 border 里面的none甘有， 不要定位的時候用廊散。
- 靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移梧疲。
- 靜態(tài)定位在布局時我們幾乎不用的
7.2.2 相對定位(relative) - 重要
- 相對定位是元素相對于它 原來在標(biāo)準(zhǔn)流中的位置 來說的。
效果圖：
相對定位的特點(diǎn)：
- 相對于 自己原來在標(biāo)準(zhǔn)流中位置來移動的
- 原來在標(biāo)準(zhǔn)流的區(qū)域繼續(xù)占有运准，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它幌氮。
7.2.3 絕對定位(absolute)
絕對定位是元素以帶有定位的父級元素來移動位置
完全脫標(biāo) —— 完全不占位置；
-
父元素沒有定位胁澳，則以瀏覽器為準(zhǔn)定位（Document 文檔）该互。
05_絕對定位_父級無定位.png -
父元素要有定位
-
將元素依據(jù)最近的已經(jīng)定位（絕對组砚、固定或相對定位）的父元素（祖先）進(jìn)行定位宝鼓。
06_絕對定位_父級有定位.png
-
絕對定位的特點(diǎn)：
- 絕對是以帶有定位的父級元素來移動位置 （拼爹型） 如果父級都沒有定位蚣旱，則以瀏覽器文檔為準(zhǔn)移動位置
- 不保留原來的位置周蹭，完全是脫標(biāo)的扩劝。
因?yàn)榻^對定位的盒子要和父級搭配一起來使用妇押。
定位口訣 —— 子絕父相
絕對定位蕴坪，要和帶有定位的父級搭配使用聚假，那么父級要用什么定位呢锦庸？
子絕父相 —— 子級是絕對定位机蔗，父級要用相對定位。
子絕父相是使用絕對定位的口訣甘萧，要牢牢記茁茑摇！
疑問：為什么在布局時扬卷，子級元素使用絕對定位時牙言，父級元素就要用相對定位呢？
觀察下圖怪得，思考一下在布局時咱枉，左右兩個方向的箭頭圖片以及父級盒子的定位方式卑硫。
分析：
- 方向箭頭疊加在其他圖片上方，應(yīng)該使用絕對定位庞钢，因?yàn)?strong>絕對定位完全脫標(biāo)拔恰，完全不占位置。
-
父級盒子應(yīng)該使用相對定位基括，因?yàn)?strong>相對定位不脫標(biāo)颜懊，后續(xù)盒子仍然以標(biāo)準(zhǔn)流的方式對待它。
- 如果父級盒子也使用絕對定位风皿，會完全脫標(biāo)河爹，那么下方的廣告盒子會上移，這顯然不是我們想要的桐款。
結(jié)論：父級要占有位置咸这，子級要任意擺放，這就是子絕父相的由來魔眨。
7.2.4 固定定位(fixed)
固定定位是絕對定位的一種特殊形式： （認(rèn)死理型） 如果說絕對定位是一個矩形 那么 固定定位就類似于正方形
- 完全脫標(biāo) —— 完全不占位置媳维；
- 只認(rèn)瀏覽器的可視窗口 ——
瀏覽器可視窗口 + 邊偏移屬性來設(shè)置元素的位置；- 跟父元素沒有任何關(guān)系遏暴；單獨(dú)使用的
- 不隨滾動條滾動侄刽。
提示：IE 6 等低版本瀏覽器不支持固定定位。
7.3 定位(position)的擴(kuò)展
絕對定位的盒子居中
注意：絕對定位/固定定位的盒子不能通過設(shè)置
margin: auto設(shè)置水平居中朋凉。
在使用絕對定位時要想實(shí)現(xiàn)水平居中州丹，可以按照下圖的方法：
-
left: 50%;：讓盒子的左側(cè)移動到父級元素的水平中心位置； -
margin-left: -100px;：讓盒子向左移動自身寬度的一半杂彭。
盒子居中定位示意圖
堆疊順序（z-index）
在使用定位布局時墓毒，可能會出現(xiàn)盒子重疊的情況。
加了定位的盒子亲怠，默認(rèn)后來者居上所计， 后面的盒子會壓住前面的盒子。
應(yīng)用 z-index 層疊等級屬性可以調(diào)整盒子的堆疊順序团秽。如下圖所示：
z-index 的特性如下：
- 屬性值：正整數(shù)醉箕、負(fù)整數(shù)或 0，默認(rèn)值是 0徙垫，數(shù)值越大讥裤，盒子越靠上；
- 如果屬性值相同姻报，則按照書寫順序己英，后來居上；
- 數(shù)字后面不能加單位吴旋。
注意：z-index 只能應(yīng)用于相對定位损肛、絕對定位和固定定位的元素厢破，其他標(biāo)準(zhǔn)流、浮動和靜態(tài)定位無效治拿。
定位改變display屬性
前面我們講過摩泪， display 是 顯示模式， 可以改變顯示模式有以下方式:
- 可以用inline-block 轉(zhuǎn)換為行內(nèi)塊
- 可以用浮動 float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類似劫谅，并不完全一樣见坑，因?yàn)楦邮敲摌?biāo)的）
- 絕對定位和固定定位也和浮動類似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊捏检。
所以說荞驴， 一個行內(nèi)的盒子，如果加了浮動贯城、固定定位和絕對定位熊楼，不用轉(zhuǎn)換，就可以給這個盒子直接設(shè)置寬度和高度等能犯。
同時注意：
浮動元素鲫骗、絕對定位(固定定位）元素的都不會觸發(fā)外邊距合并的問題。 （我們以前是用padding border overflow解決的）
也就是說踩晶，我們給盒子改為了浮動或者定位执泰，就不會有垂直外邊距合并的問題了。
7.4 定位小結(jié)
| 定位模式 | 是否脫標(biāo)占有位置 | 移動位置基準(zhǔn) | 模式轉(zhuǎn)換（行內(nèi)塊） | 使用情況 |
|---|---|---|---|---|
| 靜態(tài)static | 不脫標(biāo)合瓢，正常模式 | 正常模式 | 不能 | 幾乎不用 |
| 相對定位relative | 不脫標(biāo)，占有位置 | 相對自身位置移動 | 不能 | 基本單獨(dú)使用 |
| 絕對定位absolute | 完全脫標(biāo)透典，不占有位置 | 相對于定位父級移動位置 | 能 | 要和定位父級元素搭配使用 |
| 固定定位fixed | 完全脫標(biāo)晴楔，不占有位置 | 相對于瀏覽器移動位置 | 能 | 單獨(dú)使用，不需要父級 |
注意：
- 邊偏移需要和定位模式聯(lián)合使用峭咒，單獨(dú)使用無效税弃；
-
top和bottom不要同時使用； -
left和right不要同時使用凑队。
網(wǎng)頁布局總結(jié)
一個完整的網(wǎng)頁则果，有標(biāo)準(zhǔn)流 、 浮動 漩氨、 定位 一起完成布局的西壮。每個都有自己的專門用法。
1). 標(biāo)準(zhǔn)流
可以讓盒子上下排列 或者 左右排列的
2). 浮動
可以讓多個塊級元素一行顯示 或者 左右對齊盒子 浮動的盒子就是按照順序左右排列
3). 定位
定位最大的特點(diǎn)是有層疊的概念叫惊，就是可以讓多個盒子 前后 疊壓來顯示款青。 但是每個盒子需要測量數(shù)值。
8 CSS高級技巧
8.1 元素的顯示與隱藏
8.1.1 display 顯示
-
display 設(shè)置或檢索對象是否及如何顯示霍狰。
display: none 隱藏對象 display：block 除了轉(zhuǎn)換為塊級元素之外抡草，同時還有顯示元素的意思饰及。 -
特點(diǎn)： 隱藏之后，不再保留位置康震。
29none.png
實(shí)際開發(fā)場景：
配合后面js做特效燎含，比如下拉菜單，原先沒有腿短，鼠標(biāo)經(jīng)過屏箍，顯示下拉菜單， 應(yīng)用極為廣泛
8.1.2 visibility 可見性
-
設(shè)置或檢索是否顯示對象答姥。
visibility：visible ; 對象可視 visibility：hidden; 對象隱藏 -
特點(diǎn)： 隱藏之后铣除，繼續(xù)保留原有位置。
30visibility.png
8.1.3 overflow 溢出
- 檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容鹦付。
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內(nèi)容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內(nèi)容尚粘，超出的部分隱藏掉 |
| scroll | 不管超出內(nèi)容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條敲长，不超出不顯示滾動條 |
實(shí)際開發(fā)場景：
- 清除浮動
- 隱藏超出內(nèi)容郎嫁，隱藏掉, 不允許內(nèi)容超過父盒子。
8.1.4 顯示與隱藏總結(jié)
| 屬性 | 區(qū)別 | 用途 |
|---|---|---|
| display | 隱藏對象祈噪，不保留位置 | 配合后面js做特效泽铛，比如下拉菜單，原先沒有辑鲤，鼠標(biāo)經(jīng)過盔腔，顯示下拉菜單， 應(yīng)用極為廣泛 |
| visibility | 隱藏對象月褥，保留位置 | 使用較少 |
| overflow | 只是隱藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子里面的內(nèi)容不會超出該盒子范圍 |
8.2. CSS用戶界面樣式
- 所謂的界面樣式弛随， 就是更改一些用戶操作樣式，以便提高更好的用戶體驗(yàn)宁赤。
- 更改用戶的鼠標(biāo)樣式 (滾動條因?yàn)榧嫒菪苑浅２钜ㄍ福覀儾谎芯?
- 表單輪廓等。
- 防止表單域拖拽
8.2.1 鼠標(biāo)樣式cursor
設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀决左。
| 屬性值 | 描述 |
|---|---|
| default | 小白 默認(rèn) |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">禁止</li>
</ul>
8.2.2 輪廓線 outline
是繪制于元素周圍的一條線愕够，位于邊框邊緣的外圍，可起到突出元素的作用佛猛。
outline : outline-color ||outline-style || outline-width
但是我們都不關(guān)心可以設(shè)置多少惑芭，我們平時都是去掉的。
最直接的寫法是 ： outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
8.2.3 防止拖拽文本域resize
實(shí)際開發(fā)中继找，我們文本域右下角不可以拖拽：
<textarea style="resize: none;"></textarea>
8.2.4 用戶界面樣式總結(jié)
| 屬性 | 用途 | 用途 |
|---|---|---|
| 鼠標(biāo)樣式 | 更改鼠標(biāo)樣式cursor | 樣式很多强衡，重點(diǎn)記住 pointer |
| 輪廓線 | 表單默認(rèn)outline | outline 輪廓線，我們一般直接去掉，border是邊框漩勤，我們會經(jīng)常用 |
| 防止拖拽 | 主要針對文本域resize | 防止用戶隨意拖拽文本域感挥，造成頁面布局混亂，我們resize:none |
8.3 vertical-align 垂直對齊
- 有寬度的塊級元素居中對齊越败，是margin: 0 auto;
- 讓文字居中對齊触幼，是 text-align: center;
但是我們從來沒有講過有垂直居中的屬性。
vertical-align 垂直對齊究飞，它只針對于行內(nèi)元素或者行內(nèi)塊元素置谦，
vertical-align : baseline |top |middle |bottom
設(shè)置或檢索對象內(nèi)容的垂直對其方式。
-
注意：
vertical-align 不影響塊級元素中的內(nèi)容對齊亿傅，它只針對于行內(nèi)元素或者行內(nèi)塊元素媒峡，
特別是行內(nèi)塊元素， 通常用來控制圖片/表單與文字的對齊葵擎。
8.3.1 圖片谅阿、表單和文字對齊
所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關(guān)系了酬滤。 默認(rèn)的圖片會和文字基線對齊签餐。
8.3.2 去除圖片底側(cè)空白縫隙
原因：圖片或者表單等行內(nèi)塊元素，他的底線會和父級盒子的基線對齊盯串。就是圖片底側(cè)會有一個空白縫隙氯檐。
-
解決的方法就是：
- 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊体捏。<img src="media/1633.png" width="500" style="border: 1px dashed #ccc;" />
- 給img 添加 display：block; 轉(zhuǎn)換為塊級元素就不會存在問題了冠摄。<img src="media/sina1.png" width="500" style="border: 1px dashed #ccc;"/>
8.4 溢出的文字省略號顯示
8.4.1 white-space
- white-space設(shè)置或檢索對象內(nèi)文本顯示方式。通常我們使用于強(qiáng)制一行顯示內(nèi)容
white-space:normal 几缭；默認(rèn)處理方式
white-space:nowrap 河泳； 強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對象才換行奏司。
8.4.2 text-overflow 文字溢出
- 設(shè)置或檢索是否使用一個省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出
text-overflow : clip 乔询；不顯示省略標(biāo)記（...）樟插，而是簡單的裁切
text-overflow：ellipsis 韵洋； 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）
注意：
一定要首先強(qiáng)制一行內(nèi)顯示，再次和overflow屬性 搭配使用
8.4.3 總結(jié)三步曲
/*1. 先強(qiáng)制一行內(nèi)顯示文本*/
white-space: nowrap;
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號替代超出的部分*/
text-overflow: ellipsis;
8.5 CSS精靈技術(shù)（sprite)
8.5.1 為什么需要精靈技術(shù)
當(dāng)用戶訪問一個網(wǎng)站時黄锤，需要向服務(wù)器發(fā)送請求搪缨，網(wǎng)頁上的每張圖像都要經(jīng)過一次請求才能展現(xiàn)給用戶。
然而鸵熟，一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾副编，當(dāng)網(wǎng)頁中的圖像過多時，服務(wù)器就會頻繁地接受和發(fā)送請求流强，這將大大降低頁面的加載速度痹届。
為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)呻待，提高頁面的加載速度。
出現(xiàn)了CSS精靈技術(shù)（也稱CSS Sprites队腐、CSS雪碧）蚕捉。
8.5.2 精靈技術(shù)講解
CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），然而柴淘，各個網(wǎng)頁元素通常只需要精靈圖中不同位置的某個小圖迫淹，要想精確定位到精靈圖中的某個小圖。
這樣为严，當(dāng)用戶訪問該頁面時敛熬，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來第股。
我們需要使用CSS的
- background-image应民、
- background-repeat
- background-position屬性進(jìn)行背景定位，
- 其中最關(guān)鍵的是使用background-position 屬性精確地定位炸茧。
8.5.3 精靈技術(shù)使用的核心總結(jié)
首先我們知道瑞妇，css精靈技術(shù)主要針對于背景圖片，插入的圖片img 是不需要這個技術(shù)的梭冠。
- 精確測量辕狰，每個小背景圖片的大小和 位置。
- 給盒子指定小背景圖片時控漠， 背景定位基本都是 負(fù)值蔓倍。
8.5.4 制作精靈圖
CSS 精靈其實(shí)是將網(wǎng)頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的盐捷，就是把小圖拼合成一張大圖偶翅。
大部分情況下，精靈圖都是網(wǎng)頁美工做碉渡。
我們精靈圖上放的都是小的裝飾性質(zhì)的背景圖片聚谁。 插入圖片不能往上放。
我們可以橫向擺放也可以縱向擺放滞诺，但是每個圖片之間留有適當(dāng)?shù)目障?在我們精靈圖的最低端形导，留一片空隙，方便我們以后添加其他精靈圖习霹。
結(jié)束語： 小公司朵耕，背景圖片很少的情況，沒有必要使用精靈技術(shù)淋叶，維護(hù)成本太高阎曹。 如果是背景圖片比較多，可以建議使用精靈技術(shù)。
8.6 滑動門
滑動門出現(xiàn)的背景
制作網(wǎng)頁時处嫌，為了美觀栅贴，常常需要為網(wǎng)頁元素設(shè)置特殊形狀的背景，比如微信導(dǎo)航欄熏迹，有凸起和凹下去的感覺筹误，最大的問題是里面的字?jǐn)?shù)不一樣多，咋辦癣缅？
為了使各種特殊形狀的背景能夠自適應(yīng)元素中文本內(nèi)容的多少厨剪，出現(xiàn)了CSS滑動門技術(shù)。它從新的角度構(gòu)建頁面友存，使各種特殊形狀的背景能夠自由拉伸滑動祷膳，以適應(yīng)元素內(nèi)部的文本內(nèi)容，可用性更強(qiáng)屡立。 最常見于各種導(dǎo)航欄的滑動門直晨。
核心技術(shù)
核心技術(shù)就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能適應(yīng)不同字?jǐn)?shù)的導(dǎo)航欄。
一般的經(jīng)典布局都是這樣的：
<li>
<a href="#">
<span>導(dǎo)航欄內(nèi)容</span>
</a>
</li>
css樣式
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
總結(jié)：
- a 設(shè)置 背景左側(cè)膨俐，padding撐開合適寬度勇皇。
- span 設(shè)置背景右側(cè)， padding撐開合適寬度 剩下由文字繼續(xù)撐開寬度焚刺。
- 之所以a包含span就是因?yàn)?整個導(dǎo)航都是可以點(diǎn)擊的敛摘。
8.7. 拓展
8.7.1 margin負(fù)值之美
1). 負(fù)邊距+定位：水平垂直居中
前面講過， 一個絕對定位的盒子乳愉， 利用 父級盒子的 50%兄淫， 然后 往左(上) 走 自己寬度的一半 ，可以實(shí)現(xiàn)盒子水平垂直居中蔓姚。
2). 壓住盒子相鄰邊框
8.7.2 CSS三角形之美
div {
width: 0;
height: 0;
line-height:0;
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
- 我們用css 邊框可以模擬三角效果
- 寬度高度為0
- 我們4個邊框都要寫捕虽， 只保留需要的邊框顏色，其余的不能省略坡脐，都改為 transparent 透明就好了
- 為了照顧兼容性 低版本的瀏覽器泄私，加上 font-size: 0; line-height: 0;
