一. 初識(shí)CSS
CSS文檔:
https://www.w3school.com.cn/cssref/index.asp
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱.
CSS 是也是一種標(biāo)記語言，其主要用于設(shè)置 HTML 頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、 邊距等）以及版面的布局和外觀顯示樣式等。
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：
- 選擇器
-
一條或多條聲明
image.png
注意:
- 選擇器是用于指定
CSS樣式的HTML標(biāo)簽，花括號(hào)內(nèi)是對該對象設(shè)置的具體樣式 - 屬性和屬性值以“鍵值對”的形式出現(xiàn)
- 屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等
- 屬性和屬性值之間用英文
“:”分開 - 多個(gè)“鍵值對”之間用英文
“;”進(jìn)行區(qū)分
所有的樣式，都包含在 <style> 標(biāo)簽內(nèi)，表示是樣式表，<style> 一般寫到 </head> 上方。
樣例:
<head>
<style>
h3 {
color: blue;
font-size: 20px;
}
</style>
</head>
測試:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h3 {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h3>CSS測試</h3>
</body>
</html>
二. CSS 選擇器
選擇器就是根據(jù)不同需求把不同的標(biāo)簽選出來
選擇器分為兩個(gè)大類
- 基礎(chǔ)選擇器
- 復(fù)合選擇器
2.1 css基礎(chǔ)選擇器
基礎(chǔ)選擇器是由單個(gè)選擇器組成的
基礎(chǔ)選擇器又包括：
- 標(biāo)簽選擇器
- 類選擇器
- id 選擇器
- 通配符選擇器
2.1.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)簽。
樣例:
p {
color: blanchedalmond;
font-size: 50px;
}
測試:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: blanchedalmond;
font-size: 50px;
}
</style>
</head>
<body>
<div>CSS測試</div>
</body>
</html>
2.1.2 類選擇器
如果想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器
.red {
color: red;
}
......
<div class='red'> 變紅色 </div>
類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個(gè)點(diǎn)“.”號(hào)顯示
類選擇器可以使用多個(gè)類名，多個(gè)類名中間必須用空格分開
<div class="font12 blue">山東省</div>
測試:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
color: red;
font-size: 20px;
}
.blue {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div class = 'red'>CSS測試1_red</div>
<div class = 'blue'>CSS測試2_blue</div>
</body>
</html>
2.1.3 id選擇器
HTML 元素 以 id 屬性來設(shè)置 id 選擇器，CSS 中 id 選擇器以“#"來定義
注意：
id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。
測試:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#red {
color:red;
}
</style>
</head>
<body>
<div id="red">CSS測試1_red</div>
</body>
</html>
2.1.4 通配符選擇器
通配符選擇器使用“ * ”定義，它表示選取頁面中所有元素（標(biāo)簽）
通配符選擇器不需要調(diào)用，一般常用于清除所有的元素標(biāo)簽的內(nèi)外邊距
樣例:
* {
margin: 0;
padding: 0;
}
測試:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>CSS測試_通配符</div>
</body>
</html>
2.2 css復(fù)合選擇器
在CSS 中，復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對基本選擇器進(jìn)行組合形成的。
- 復(fù)合選擇器可以更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽）
- 復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的
- 常用的復(fù)合選擇器包括：
3.1) 后代選擇器
3.2) 子選擇器
3.3) 并集選擇器
3.4) 偽類選擇器等等
2.2.1 后代選擇器
后代選擇器 又稱為 包含選擇器 ，可以選擇父元素里面子元素。其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在 后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
代碼:
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
測試記錄:
2.2.2 子選擇器
子元素選擇器（子選擇器）只能選擇作為某元素的最近一級(jí)子元素，簡單理解就是選親兒子元素.
代碼:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
測試記錄:
2.2.3 并集選擇器
并集選擇器可以選擇多組標(biāo)簽, 同時(shí)為他們定義相同的樣式,各選擇器通過英文逗號(hào)","連接而成
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>復(fù)合選擇器之并集選擇器</title>
<style>
/* div,p{
color: pink;
} */
div,p,.pig {
color: pink;
}
</style>
</head>
<body>
并集選擇器可以選擇多組標(biāo)簽，同時(shí)針對他們的樣式進(jìn)行更改<br>
元素1，元素2，元素2{} 元素中間用英文逗號(hào)隔開，逗號(hào)是“和”的意思，通常用于集體聲明；
<div>熊大</div>
<p>熊二</p>
<span>光頭強(qiáng)</span>
<ul class="pig">
<li>小豬佩奇</li>
<li>豬爸爸</li>
<li>豬媽媽</li>
</ul>
</body>
</html>
測試記錄:
2.2.4 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果
偽類選擇器書寫最大的特點(diǎn)是用冒號(hào) ":" 表示，比如 :hover 、 :first-child
偽類選擇器很多，有鏈接偽類、結(jié)構(gòu)偽類等，這里先介紹的是 鏈接偽類選擇器
a {
color: gray;
}
/* 1.選中未被訪問過的鏈接 */
a:link {
color: black;
text-decoration: none;
}
/* 2.選擇已訪問的鏈接 */
a:visited {
color: red;
}
/* 3.選擇鼠標(biāo)經(jīng)過的鏈接(實(shí)際開發(fā)重點(diǎn)) */
a:hover {
color: blue;
}
/* 4.選擇鼠標(biāo)按下但未彈起的鏈接 */
a:active {
color: forestgreen;
}
注意：
為了確保生效，請按照 LVHA 的循順序聲明 :link :visited :hover :active
focus 偽類選擇器：
:focus 偽類選擇器主要用于選取獲得焦點(diǎn)的表單元素。 焦點(diǎn)就是光標(biāo)，一般情況 <input> 類表單元素才能獲取，因此這個(gè)選擇器也主要針對于表單元素來說
測試代碼:
<!DOCTYPE html">
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
測試記錄:
2.3 CSS3 新增選擇器
2.3.1 屬性選擇器
屬性選擇器可以根據(jù)元素特定屬性的來選擇元素，這樣就可以不用借助于類或者id選擇器。
/* 1.必須是input 但是同時(shí)具有 value這個(gè)屬性 選擇這個(gè)元素 */
input[value] {
color:pink;
}
/* 2.只把 type =text 的input選取出來 */
input[type=text] {
color: pink;
}
/* 3.選擇具有class屬性，并且屬性值必須是 icon開頭 的這些元素 */
div[class^=icon] {
color: red;
}
/* 4.選擇以data結(jié)尾的某些元素 */
section[class$=data] {
color: blue;
}
/* 5.選擇屬性里含有 xd 的某些元素 */
div[class*=xd] {
color: red;
}
注意：
屬性選擇器中標(biāo)簽名與屬性之間沒有空格！
2.3.2 結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù) 文檔結(jié)構(gòu) 來選擇器元素， 常用于根據(jù)父級(jí)選擇器里面的子元素
/* 1. 選擇ul里面的第一個(gè)孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 選擇ul里面的最后一個(gè)孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 選擇ul里面的第2個(gè)孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* 1.把所有的偶數(shù) even的孩子選出來 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇數(shù) odd的孩子選出來 */
ul li:nth-child(odd) {
background-color: gray;
}
注意：
nth-child（n）選擇某個(gè)父元素的一個(gè)或多個(gè)特定的子元素，n 是從 0 開始計(jì)算的，可以是數(shù)字，關(guān)鍵字(even odd)和公式
上面三個(gè)同理，區(qū)別在于：
-
nth-child對父元素里面所有孩子排序選擇， 先找到第n個(gè)孩子，然后看看是否和E匹配 -
nth-of-type對父元素里面指定子元素進(jìn)行排序選擇， 先去匹配E ，然后再根據(jù)E 找第n個(gè)孩子
2.3.3 偽元素選擇器
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，從而簡化HTML結(jié)構(gòu)
.fake::before {
content: '我';
}
.fake::after {
content: '小豬佩奇';
}
注意：
- before 和 after 創(chuàng)建一個(gè)元素，但是屬于行內(nèi)元素
- 新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的，所以我們稱為偽元素
- before 和 after 必須有 content 屬性
- before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素
三. 字體屬性
3.1 字體系列
CSS 使用 font-family 屬性定義文本的字體系列
div {font-family: Arial,"Microsoft Yahei", "微軟雅黑";}
各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開
一般情況下,如果有空格隔開的多個(gè)單詞組成的字體,加引號(hào).
3.2 字體大小
CSS 使用 font-size 屬性定義字體大小
p {
font-size: 20px;
}
px（像素）大小是我們網(wǎng)頁的最常用的單位
谷歌瀏覽器默認(rèn)的文字大小為16px
3.3 字體粗細(xì)
CSS 使用 font-weight 屬性設(shè)置文本字體的粗細(xì)
p {
font-weight: bold;
}
3.4 文字樣式
CSS 使用 font-style 屬性設(shè)置文本的風(fēng)格
p {
font-style: normal;
}
3.5 字體復(fù)合屬性
字體屬性可以把以上文字樣式綜合來寫, 這樣可以更節(jié)約代碼:
body {
font: font-style font-weight font-size/line-height font-family;
}
注意:
必須按上面語法格式中的順序書寫，不能更換順序，并且各個(gè)屬性間以空格隔開
必須保留
font-size和font-family屬性，其他屬性可以省略，否則 font 屬性將不起作用
四. 文本屬性
4.1 文本顏色
color 屬性用于定義文本的顏色。
div {
color: red;
}
有三種顏色的表示方式，開發(fā)中最常用的是十六進(jìn)制
4.2 對齊文本
4.2.1 水平對齊文本
text-align 屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對齊方式
div {
text-align: center;
}
4.2.2 垂直對齊文本
CSS 的 vertical-align 屬性使用場景： 經(jīng)常用于設(shè)置圖片或者表單和文字垂直對齊。但是它只針對于行內(nèi)元素或者行內(nèi)塊元素有效
vertical-align : baseline | top | middle | bottom
解決圖片底部默認(rèn)空白縫隙問題：
bug：圖片底側(cè)會(huì)有一個(gè)空白縫隙，原因是行內(nèi)塊元素會(huì)和文字的基線對齊。
主要解決方法有兩種：
- 給圖片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
- 把圖片轉(zhuǎn)換為塊級(jí)元素 display: block;
4.3 裝飾文本
text-decoration 屬性規(guī)定添加到文本的修飾，可以給文本添加下劃線、刪除線、上劃線等
div {
text-decoration：underline；
}
4.4 文本縮進(jìn)
text-indent 屬性用來指定文本的第一行的縮進(jìn)，通常是將段落的首行縮進(jìn)
p {
text-indent: 2em;
}
注意：
em 是一個(gè)相對單位，就是當(dāng)前元素（font-size) 1 個(gè)文字的大小, 如果當(dāng)前元素沒有設(shè)置大小，則會(huì)按照父元素的 1 個(gè)文字大小。
4.5 行間距
line-height 屬性用于設(shè)置行間的距離（行高），可以控制文字行與行之間的距離.
p {
line-height: 26px;
}
注意：
line-height讓文字的行高等于盒子的高度,可以實(shí)現(xiàn)文字在盒子內(nèi)垂直居中
4.6 文字陰影
在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本
text-shadow: h-shadow v-shadow blur color;
4.7 溢出的文字省略號(hào)顯示
4.7.1 單行文本溢出顯示省略號(hào)
單行文本溢出顯示省略號(hào)--必須滿足三個(gè)條件:
/*1. 先強(qiáng)制一行內(nèi)顯示文本*/
white-space: nowrap; （ 默認(rèn) normal 自動(dòng)換行）
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號(hào)替代超出的部分*/
text-overflow: ellipsis;
4.7.2 多行文本溢出顯示省略號(hào)
多行文本溢出顯示省略號(hào)，有較大兼容性問題, 適合于webKit瀏覽器或移動(dòng)端（移動(dòng)端大部分是webkit內(nèi)核）
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 2;
/* 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
4.8 CSS的注釋
CSS 中的注釋跟在HTML5中的不同，它以“ /* ”開頭，以“ */ ”結(jié)尾
/* 需要注釋的內(nèi)容 */
五. CSS引入方式
按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：
- 內(nèi)部樣式表（嵌入式）
- 行內(nèi)樣式表（行內(nèi)式）
- 外部樣式表（鏈接式）
5.1 內(nèi)部樣式表
內(nèi)部樣式表是寫到html頁面內(nèi)部.，將所有的 CSS 代碼抽取出來，單獨(dú)放到一個(gè) <style> 標(biāo)簽中
<style>
div {
color: red;
font-size: 12px;
}
</style>
- <style> 標(biāo)簽一般會(huì)放在文檔的<head>標(biāo)簽中
- 代碼結(jié)構(gòu)清晰，但是并沒有實(shí)現(xiàn)結(jié)構(gòu)與樣式完全分離
5.2 行內(nèi)樣式表
行內(nèi)樣式表是在元素標(biāo)簽內(nèi)部的 style 屬性中設(shè)定 CSS 樣式，適合于修改簡單樣式.
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
不推薦大量使用，只有對當(dāng)前元素添加簡單樣式的時(shí)候，可以考慮使用
5.3 外部樣式表
實(shí)際開發(fā)都是外部樣式表，適合于樣式比較多的情況.
引入外部樣式表分為兩步：
- 新建一個(gè)后綴名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。
- 在 HTML 頁面中，使用<link> 標(biāo)簽引入這個(gè)文件
<link rel="stylesheet" href="css文件路徑">
六. 元素顯示模式
元素顯示模式就是 元素（標(biāo)簽）以什么方式進(jìn)行顯示
HTML 元素一般分為：
- 塊元素
- 行內(nèi)元素
- 行內(nèi)塊元素
6.1 塊元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 標(biāo)簽是最典型的塊元素。
塊級(jí)元素的特點(diǎn)：
- 自己獨(dú)占一行。
- 高度，寬度、外邊距以及內(nèi)邊距都可以控制。
- 寬度默認(rèn)是容器（父級(jí)寬度）的100%。
- 是一個(gè)容器及盒子，里面可以放行內(nèi)或者塊級(jí)元素。
注意：
- 文字類的元素內(nèi)不能使用塊級(jí)元素
-
<p>標(biāo)簽主要用于存放文字，因此<p>里面不能放塊級(jí)元素，特別是不能放<div> - 同理，
<h1>~<h6>等都是文字類塊級(jí)標(biāo)簽，里面也不能放其他塊級(jí)元素
6.2 行內(nèi)元素
常見的行內(nèi)元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 標(biāo)簽是最典型的行內(nèi)元素。有的地方也將行內(nèi)元素稱為內(nèi)聯(lián)元素。
行內(nèi)元素的特點(diǎn)：
- 相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)。
- 高、寬直接設(shè)置是無效的。
- 默認(rèn)寬度就是它本身內(nèi)容的寬度。
- 行內(nèi)元素只能容納文本或其他行內(nèi)元素。
6.3 行內(nèi)塊元素
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽 —— <img />、<input />、<td>，它們同時(shí)具有塊元素和行內(nèi)元素的特點(diǎn)。 有些資料稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點(diǎn)：
- 和相鄰行內(nèi)元素（行內(nèi)塊）在一行上，但是他們之間會(huì)有空白縫隙。
- 默認(rèn)寬度就是它本身內(nèi)容的寬度（行內(nèi)元素特點(diǎn)）。
- 高度，行高、外邊距以及內(nèi)邊距都可以控制（塊級(jí)元素特點(diǎn)）。
6.4 元素顯示模式總結(jié)
6.5 元素顯示模式轉(zhuǎn)換
有時(shí)候一個(gè)模式的元素需要另外一種模式的特性時(shí)，我們就需要元素模式的轉(zhuǎn)換
/* 轉(zhuǎn)換為塊元素 */
display: block;
/* 轉(zhuǎn)換為行內(nèi)元素 */
display: inline;
/* 轉(zhuǎn)換為行內(nèi)塊元素 */
display: inline-block;
七. 背景屬性
通過 CSS 背景屬性，可以給頁面元素添加背景樣式。 背景屬性可以設(shè)置背景顏色、 背景圖片、背景平鋪、背景圖片位置、 背景圖像固定等。
7.1 背景顏色
background-color 屬性定義了元素的背景顏色
background-color: blue;
一般情況下元素背景顏色默認(rèn)值是 transparent （透明），我們也可以手動(dòng)指定為透明色。
background-color:transparent;
7.2 背景圖片
background-image 屬性描述了元素的背景圖像。實(shí)際開發(fā)常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優(yōu)點(diǎn)是非常便于控制位置. (精靈圖也是一種運(yùn)用場景)
background-image : none | url (url)
注意：
背景圖片后面的地址，千萬不要忘記加 URL， 同時(shí)里面的路徑不要加引號(hào)
7.3 背景平鋪
background-repeat 屬性可以實(shí)現(xiàn)對背景圖像進(jìn)行平鋪
background-repeat: repeat | no-repeat | repeat-x | repeat-y
7.4 背景圖片位置
background-position 屬性可以改變圖片在背景中的位置
background-position: x y;
參數(shù)代表的意思是：x 坐標(biāo)和 y 坐標(biāo)。 可以使用 方位名詞 或者 精確單位
主要分為以下三種情況：
參數(shù)是方位名詞
1.1) 如果指定的兩個(gè)值都是方位名詞，則兩個(gè)值前后順序無關(guān)，比如 left top 和 top left 效果一致
1.2) 如果只指定了一個(gè)方位名詞，另一個(gè)值省略，則第二個(gè)值默認(rèn)居中對齊參數(shù)是精確單位
2.1) 如果參數(shù)值是精確坐標(biāo)，那么第一個(gè)肯定是 x 坐標(biāo)，第二個(gè)一定是 y 坐標(biāo)
2.2) 如果只指定一個(gè)數(shù)值，那該數(shù)值一定是 x 坐標(biāo)，另一個(gè)默認(rèn)垂直居中參數(shù)是混合單位
3.1) 如果指定的兩個(gè)值是精確單位和方位名詞混合使用，則第一個(gè)值是 x 坐標(biāo)，第二個(gè)值是 y 坐標(biāo)
7.5 背景圖像固定（背景附著）
background-attachment 屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)，參數(shù)默認(rèn)是scroll，后期可以制作視差滾動(dòng)的效果
background-attachment : scroll | fixed
7.6 背景復(fù)合寫法
當(dāng)使用簡寫屬性時(shí)，沒有特定的書寫順序,一般習(xí)慣約定順序?yàn)椋?br>
background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動(dòng) 背景圖片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
7.7 背景色半透明
background: rgba(0, 0, 0, 0.3);
- 最后一個(gè)參數(shù)是 alpha 透明度，取值范圍在 0~1之間
- 我們習(xí)慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);
- 背景半透明是指盒子背景半透明，盒子里面的內(nèi)容不受影響
八. CSS的三大特性
CSS 有三個(gè)非常重要的三個(gè)特性：
- 層疊性
- 繼承性
- 優(yōu)先級(jí)
8.1 層疊性
相同選擇器給設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋另一個(gè)沖突的樣式
層疊性原則：
- 樣式?jīng)_突，遵循的原則是就近原則，哪個(gè)樣式離結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式
- 樣式不沖突，不會(huì)層疊；權(quán)重不一致時(shí)，也不會(huì)層疊
8.2 繼承性
CSS中的繼承: 子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式
子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的，以及color屬性）
** 行高的繼承性：**
body {
font:12px/1.5 Microsoft YaHei；
}
如果子元素沒有設(shè)置行高，則子元素的行高為：當(dāng)前子元素的文字大小 * 1.5
8.3 優(yōu)先級(jí)
當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生。
- 選擇器相同，則執(zhí)行層疊性
- 選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行
選擇器權(quán)重如下表所示：
注意
- 權(quán)重是有4組數(shù)字組成,但是不會(huì)有進(jìn)位。
- 可以理解為類選擇器永遠(yuǎn)大于元素選擇器, id選擇器永遠(yuǎn)大于類選擇器,以此類推
權(quán)重疊加
如果是復(fù)合選擇器，則會(huì)有權(quán)重疊加，需要計(jì)算權(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
九. 盒子模型
盒子模型就是把 HTML 頁面中的布局元素看作是一個(gè)矩形的盒子，就是一個(gè)盛裝內(nèi)容的容器。
盒子模型封裝周圍的 HTML 元素，包括：邊框、外邊距、內(nèi)邊距、和實(shí)際內(nèi)容等
9.1 邊框
9.1.1 直角邊框
border可以設(shè)置元素的邊框，邊框有三部分組成:邊框?qū)挾?粗細(xì)) 邊框樣式 邊框顏色
border : border-width || border-style || border-color
border: 1px solid red; /* 沒有順序 */
border-top: 1px solid red; /* 只設(shè)定上邊框， 其余同理 */
邊框樣式 border-style 可以設(shè)置如下值：
- none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
- solid：邊框?yàn)閱螌?shí)線(最為常用的)
- dashed：邊框?yàn)樘摼€
- dotted：邊框?yàn)辄c(diǎn)線
border-collapse 屬性控制瀏覽器繪制表格邊框的方式，它控制相鄰單元格的邊框。
/* 表示相鄰邊框合并在一起 ,即邊框像素值1+1=1 */
border-collapse:collapse;
此外，邊框會(huì)額外增加盒子的實(shí)際大小，因此我們有兩種方案解決:
- 測量盒子大小的時(shí)候,不量邊框.
- 如果測量的時(shí)候包含了邊框,則需要 width/height 減去邊框?qū)挾?/li>
9.1.2 圓角邊框
在 CSS3 中，新增了 圓角邊框 樣式， border-radius 屬性用于設(shè)置元素的外邊框圓角。
border-radius:length;
- 參數(shù)值可以為數(shù)值或百分比的形式
- 如果是正方形，想要設(shè)置為一個(gè)圓，把數(shù)值修改為高度或者寬度的一半即可，或者直接寫為 50%
- 該屬性是一個(gè)簡寫屬性，可以跟四個(gè)值，分別代表左上角、右上角、右下角、左下角
9.2 內(nèi)邊距
padding 屬性用于設(shè)置內(nèi)邊距，即邊框與內(nèi)容之間的距離。
padding 屬性（簡寫屬性）可以有一到四個(gè)值：
注意：
- padding也會(huì)影響盒子實(shí)際大小，此時(shí)需要讓 width/height 減去多出來的內(nèi)邊距大小
- 如果遇到盒子里面字?jǐn)?shù)不一樣多的時(shí)候，給盒子設(shè)置padding，而不設(shè)置寬度
9.3 外邊距
margin 屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離
margin 簡寫方式代表的意義跟 padding 完全一致。
外邊距可以讓塊級(jí)盒子水平居中，但是必須滿足兩個(gè)條件：
- 盒子必須指定了寬度（width）。
- 盒子左右的外邊距都設(shè)置為 auto 。
.header{
width:960px;
margin:0 auto;
}
注意：
以上方法是讓塊級(jí)元素水平居中，行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align:center 即可
margin負(fù)值運(yùn)用( 兩個(gè)盒子貼近而導(dǎo)致之間的邊框變粗 ):
讓每個(gè)盒子margin 往左側(cè)移動(dòng) -1px 正好壓住相鄰盒子邊框
鼠標(biāo)經(jīng)過某個(gè)盒子的時(shí)候，提高當(dāng)前盒子的層級(jí)即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）
9.4 外邊距合并問題
使用 margin 定義塊元素的 垂直外邊距 時(shí)，可能會(huì)出現(xiàn)外邊距的合并。 主要有兩種情況:
- 相鄰塊元素垂直外邊距的合并
- 嵌套塊元素垂直外邊距的塌陷
9.4.1 相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素（兄弟關(guān)系）相遇時(shí)，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和，而是 取兩個(gè)值中的較大者。
解決方案：
盡量只給一個(gè)盒子添加 margin 值
9.4.2 嵌套塊元素垂直外邊距的塌陷
對于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值
解決方案：
- 為父元素定義上邊框。
- 為父元素定義上內(nèi)邊距。
- 為父元素添加 overflow:hidden。
- 浮動(dòng)、固定，絕對定位的盒子（脫標(biāo)）不會(huì)有塌陷問題
9.4.3 清除內(nèi)外邊距
網(wǎng)頁元素很多都帶有默認(rèn)的內(nèi)外邊距，而且不同瀏覽器默認(rèn)的也不一致。因此我們在布局前，首先要清除下網(wǎng)頁元素的內(nèi)外邊距。
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
9.5 CSS3盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型，有2個(gè)值：分別為 content-box、border-box
這樣我們 計(jì)算盒子大小的方式就發(fā)生了改變。
- box-sizing: content-box 盒子大小為 width + padding + border （以前默認(rèn)的）
- box-sizing: border-box 盒子大小為 width
如果盒子模型我們改為了box-sizing: border-box ，那padding和border就不會(huì)撐大盒子了（前提padding 和border不會(huì)超過width寬度）
9.6 盒子陰影
CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影
box-shadow: h-shadow v-shadow blur spread color inset;
注意：
- 默認(rèn)的是外陰影(outset), 但是不可以寫這個(gè)單詞,否則造成陰影無效
- 盒子陰影不占用空間，不會(huì)影響其他盒子排列。
十. 浮動(dòng)
CSS 提供了三種傳統(tǒng)布局方式：普通流（標(biāo)準(zhǔn)流）、 浮動(dòng) 、定位
所謂標(biāo)準(zhǔn)流: 就是標(biāo)簽按照規(guī)定好默認(rèn)方式排列.
有很多的布局效果，標(biāo)準(zhǔn)流沒有辦法完成，此時(shí)就可以利用浮動(dòng)完成布局。比如行內(nèi)塊元素可以實(shí)現(xiàn)一行顯示，但是他們之間會(huì)有大的空白縫隙，很難控制。
多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。
10.1 浮動(dòng)定義
float 屬性創(chuàng)建浮動(dòng)框，將其移動(dòng)到左邊緣或右邊緣或觸及包含塊或另一個(gè)浮動(dòng)框的邊緣
選擇器 { float: 屬性值; }
10.2 浮動(dòng)特性
- 浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo))
- 浮動(dòng)的盒子不再保留原先的位置
- 浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對齊
- 浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性
- 浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流,不會(huì)影響前面的標(biāo)準(zhǔn)流，所以一個(gè)元素浮動(dòng)了，理論上其余的兄弟元素也要浮動(dòng)
-
浮動(dòng)元素只會(huì)壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字（圖片）
image.png
10.3 清除浮動(dòng)
由于父級(jí)盒子很多情況下，不方便給高度，但是子盒子浮動(dòng)又不占有位置，最后父級(jí)盒子高度為 0 時(shí)，就會(huì)影響下面的標(biāo)準(zhǔn)流盒子
- 清除浮動(dòng)的本質(zhì)是清除浮動(dòng)元素造成的影響，策略是閉合浮動(dòng)
- 如果父盒子本身有高度，則不需要清除浮動(dòng)
清除浮動(dòng)核心語句：clear: both
清除浮動(dòng)方法主要有以下幾種：
- 額外標(biāo)簽法也稱為隔墻法
- 父級(jí)添加 overflow 屬性
- 父級(jí)添加after偽元素
- 父級(jí)添加雙偽元素
10.3.1 額外標(biāo)簽法
額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽。例如 <div style=”clear:both”></div>，或者其他標(biāo)簽如<br />等。
優(yōu)點(diǎn)： 通俗易懂，書寫方便
缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差
注意：
要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素。
10.3.2 父級(jí)添加 overflow
可以給 父級(jí)添加 overflow 屬性，將其屬性值設(shè)置為 hidden、 auto 或 scroll 。
優(yōu)點(diǎn)：代碼簡潔
缺點(diǎn)：無法顯示溢出的部分
10.3.3 :after 偽元素法
:after 方式是額外標(biāo)簽法的升級(jí)版，是給父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 專有 */ ，適配低版本瀏覽器
*zoom: 1;
}
優(yōu)點(diǎn)：沒有增加標(biāo)簽，結(jié)構(gòu)更簡單
缺點(diǎn)：照顧低版本瀏覽器
10.3.4 雙偽元素清除浮動(dòng)（推薦）
也是給父元素添加（添加完在父盒子中引用類名即可） ：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn)：沒有增加標(biāo)簽，結(jié)構(gòu)更簡單
缺點(diǎn)：照顧低版本瀏覽器
十一 定位
定位可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置，并且可以壓住其他盒子。
定位 = 定位模式 + 邊偏移 。
定位模式 用于指定一個(gè)元素在文檔中的定位方式。 邊偏移 則決定了該元素的最終位置。
11.1 定位模式
定位模式通過 CSS 的 position 屬性來設(shè)置，其值可以分為四個(gè)：
11.1.1 靜態(tài)定位 static
靜態(tài)定位是元素的默認(rèn)定位方式，無定位的意思
選擇器 { position: static; }
- 靜態(tài)定位按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移
- 靜態(tài)定位在布局時(shí)很少用到
11.1.2 相對定位 relative
相對定位是元素在移動(dòng)位置的時(shí)候，是相對于它原來的位置來說的
選擇器 { position: relative; }
原來在標(biāo)準(zhǔn)流的位置 繼續(xù)占有（不脫標(biāo)）
11.1.3 絕對定位 absolute
絕對定位是元素在移動(dòng)位置的時(shí)候，是相對于它祖先元素來說的
選擇器 { position: absolute; }
- 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準(zhǔn)定位。
- 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。
- 絕對定位不再占有原先的位置（脫標(biāo)）
- 絕對定位盒子居中 （不能通過 margin:0 auto） 可通過 1.left：50% 2.margin-left:自身寬度的一半實(shí)現(xiàn)
子絕父相：子級(jí)是絕對定位，父級(jí)要用相對定位
- 子級(jí)絕對定位，不會(huì)占有位置，可以放到父盒子里任何一個(gè)地方，不會(huì)影響其他的盒子。
- 父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。
- 父盒子布局時(shí)，需要占有位置，因此父親只能是相對定位。
11.1.4 固定定位 fixed
固定定位是元素固定于瀏覽器可視區(qū)的位置，即 可以在瀏覽器頁面滾動(dòng)時(shí)元素的位置不會(huì)改變。
選擇器 { position: fixed; }
- 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素。
- 跟父元素沒有任何關(guān)系，不隨滾動(dòng)條滾動(dòng)。
- 固定定位不在占有原先的位置（脫標(biāo)）。
11.1.5 粘性定位 sticky
粘性定位被認(rèn)為是相對定位和固定定位的混合 指相對定位的元素滑動(dòng)到某個(gè)位置后變?yōu)楣潭ǘㄎ?/p>
選擇器 { position: sticky; top: 10px; }
- 以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）
- 粘性定位占有原先的位置 不脫標(biāo)（相對定位特點(diǎn)）
- 必須添加 top 、left、right、bottom 其中一個(gè)才有效
11.2 邊偏移
邊偏移就是定位的盒子移動(dòng)到最終位置，有 top、bottom、left 和 right 4 個(gè)屬性
11.3 定位疊放次序 z-index
在定位布局時(shí)，可能會(huì)出現(xiàn)盒子重疊的情況，此時(shí)可以使用 z-index 來控制盒子的前后次序 (z軸)
選擇器 { z-index: 1; }
- 數(shù)值可以是正整數(shù)、負(fù)整數(shù)或 0, 默認(rèn)是 auto，數(shù)值越大，盒子越靠上
- 如果屬性值相同，則按照書寫順序，后來居上
- 數(shù)字后面不能加單位
- 只有定位的盒子才有
z-index屬性
11.4 定位特殊特性
- 行內(nèi)元素添加絕對或者固定定位，可以直接設(shè)置高度和寬度。
- 塊級(jí)元素添加絕對或者固定定位，如果不給寬度或者高度，默認(rèn)大小是內(nèi)容的大小
- 絕對定位、固定定位會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容（包括圖片、文字），跟浮動(dòng)不同
十二 元素的顯示與隱藏
類似于網(wǎng)站廣告，當(dāng)我們點(diǎn)擊關(guān)閉就不見了，但是我們重新刷新頁面，會(huì)重新出現(xiàn)！
本質(zhì)： 讓一個(gè)元素在頁面中隱藏或者顯示出來，其主要分為三種：
- display 顯示隱藏
- visibility 顯示隱藏
- overflow 溢出顯示隱藏
12.1 display屬性
display 屬性用于設(shè)置一個(gè)元素應(yīng)如何顯示。
- display: none ；隱藏對象
- display：block ；除了轉(zhuǎn)換為塊級(jí)元素之外，同時(shí)還有顯示元素的意思
display 隱藏元素后，不再占有原來的位置。
后面應(yīng)用及其廣泛，搭配 JS 可以做很多的網(wǎng)頁特效。
12.2 visibility 可見性
visibility 屬性用于指定一個(gè)元素應(yīng)可見還是隱藏。
- visibility：visible ; 元素可視
- visibility：hidden; 元素隱藏
visibility 隱藏元素后，繼續(xù)占有原來的位置。
如果隱藏元素想要原來位置， 就用 visibility：hidden
如果隱藏元素不想要原來位置， 就用 display：none (用處更多 重點(diǎn)）
12.3 overflow 溢出
overflow 屬性指定了如果內(nèi)容溢出一個(gè)元素的框（超過其指定高度及寬度）時(shí)，會(huì)發(fā)生什么
十三 精靈圖
13.1 為什么需要精靈圖
一個(gè)網(wǎng)頁中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接 收和發(fā)送請求圖片，造成服務(wù)器請求壓力過大，這將大大降低頁面的加載速度。
因此，為了有效地減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了 CSS 精靈技術(shù)（也稱CSS Sprites、CSS 雪碧）。
核心原理：將網(wǎng)頁中的一些小背景圖像整合到一張大圖中 ，這樣服務(wù)器只需要一次請求就可以了
13.2 精靈圖（sprites）的使用
- 精靈圖主要針對于小的背景圖片使用。
- 主要借助于背景位置來實(shí)現(xiàn)---background-position
- 一般情況下精靈圖都是負(fù)值。（注意網(wǎng)頁中的坐標(biāo)：x向右為正方向，y軸向下為正方向）
- 精靈圖：盒子不動(dòng) 圖片移動(dòng)
十四 字體圖標(biāo)
字體圖標(biāo)使用場景： 主要用于顯示網(wǎng)頁中通用、常用的一些小圖標(biāo)。
精靈圖是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯。
- 圖片文件還是比較大的。
- 圖片本身放大和縮小會(huì)失真。
- 一旦圖片制作完畢想要更換非常復(fù)雜。
此時(shí)，有一種技術(shù)的出現(xiàn)很好的解決了以上問題，就是 字體圖標(biāo) iconfont 。
字體圖標(biāo) 可以為前端工程師提供一種方便高效的圖標(biāo)使用方式， 展示的是圖標(biāo)，本質(zhì)屬于字體。
- 如果遇到一些結(jié)構(gòu)和樣式比較簡單的小圖標(biāo)，就用字體圖標(biāo)。
- 如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點(diǎn)的小圖片，就用精靈圖。
14.1 字體圖標(biāo)推薦下載網(wǎng)站
- icomoon 字庫 http://icomoon.io
- 阿里 iconfont 字庫 http://www.iconfont.cn/
這里以 阿里 iconfont 字庫為例，說一下iconfont引入的操作流程：
-
首先，進(jìn)入阿里 iconfont 字庫網(wǎng)站，選擇你想要的字體圖標(biāo)，點(diǎn)擊上面的購物車圖標(biāo)
image.png 在網(wǎng)站的右上角有購物車按鈕，選好圖標(biāo)好點(diǎn)擊下載代碼
-
解壓代碼后，打開里面的demo_index.html文件，顯示有三種引入字體圖標(biāo)的方法，在這里我選用的是第三種Symbol 引用
image.png
14.1.1 Symbol 引用
這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè) SVG 的集合，與另外兩種相比具有如下特點(diǎn)：
- 支持多色圖標(biāo)了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過 font-size, color 來調(diào)整樣式。
- 兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。
- 瀏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下：
- 引入項(xiàng)目下面生成的 symbol 代碼：
<script src="./iconfont.js"></script>
- 加入通用 CSS 代碼（引入一次就行）：
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
十五 CSS三角
15.1 等腰直角三角形
.div {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: blue;
margin: 100px auto;
}
效果圖：
15.2 直角三角形
.box1 {
width: 0;
height: 0;
/* 1.只保留右邊的邊框有顏色 */
border-color: transparent red transparent transparent;
/* 2. 樣式都是solid */
border-style: solid;
/* 3. 上邊框?qū)挾纫螅?右邊框 寬度稍小， 其余的邊框該為 0 */
border-width: 100px 50px 0 0;
}
效果圖：
十六 CSS 用戶界面樣式
界面樣式，就是更改一些用戶操作樣式，以便提高更好的用戶體驗(yàn)
16.1 鼠標(biāo)樣式 cursor
設(shè)置或檢索在對象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀
li {cursor: pointer; }
16.2 輪廓線 outline
給表單添加 outline: 0; 或者 outline: none; 樣式之后，就可以去掉默認(rèn)的藍(lán)色邊框
input {outline: none; }
16.3 防止拖拽文本域 resize
實(shí)際開發(fā)中，我們文本域右下角是不可以拖拽的
textarea{ resize: none;}
十七 Emmet 語法
Emmet語法前身是Zen coding,它使用縮寫來提高h(yuǎn)tml/css的編寫速度, Vscode內(nèi)部已經(jīng)集成該語法
17.1 快速生成HTML結(jié)構(gòu)語法
- 生成標(biāo)簽 直接輸入標(biāo)簽名 按tab鍵即可 比如 div 然后tab 鍵，就可以生成 <div></div>
- 如果想要生成多個(gè)相同標(biāo)簽 加上 * 就可以了 比如 div*3 就可以快速生成3個(gè)div
- 如果有父子級(jí)關(guān)系的標(biāo)簽，可以用 > 比如 ul > li就可以了
- 如果有兄弟關(guān)系的標(biāo)簽，用 + 就可以了 比如 div+p
- 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
- 如果生成的div 類名是有順序的，可以用自增符號(hào) $
- 如果想要在生成的標(biāo)簽內(nèi)部寫內(nèi)容可以用 { } 表示
17.2 快速生成CSS樣式語法
- 比如 w200 按tab 可以 生成 width: 200px;
- 比如 lh26px 按tab 可以生成 line-height: 26px;
十八 CSS3 的新特性
18.1 圖片變模糊
filter: 函數(shù)(); 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素
例如：
filter: blur(5px); blur模糊處理 數(shù)值越大越模糊 里面必須加單位
18.2 calc 函數(shù)
calc() 函數(shù)可以在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算 括號(hào)里面可以使用 + - * / 來進(jìn)行計(jì)算
width: calc(100% - 80px);
上面代碼的意思即 讓孩子的寬度永遠(yuǎn)比父親少30px
18.3 過渡
過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動(dòng)畫或JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
過渡動(dòng)畫： 是從一個(gè)狀態(tài) 漸漸的過渡到另外一個(gè)狀態(tài)
我們現(xiàn)在經(jīng)常和 :hover 一起搭配使用
transition: 要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始;
transition: width .5s, height .5s;
- 屬性 ： 想要變化的 css 屬性， 寬度高度 背景顏色 內(nèi)外邊距都可以 。如果想要寫多個(gè)屬性，利用逗號(hào)進(jìn)行分割； 如果想要所有的屬性都 變化過渡， 屬性寫all 就可以。
- 花費(fèi)時(shí)間：單位是 秒（必須寫單位） 比如 0.5s
- 運(yùn)動(dòng)曲線： 默認(rèn)是 ease （可以省略）
-
何時(shí)開始 ： 單位是 秒（必須寫單位）可以設(shè)置延遲觸發(fā)時(shí)間 默認(rèn)是 0s （可以省略）
image.png
