一. 初識CSS
CSS文檔:
https://www.w3school.com.cn/cssref/index.asp
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱.
CSS 是也是一種標記語言嗅义，其主要用于設置 HTML 頁面中的文本內容（字體妆兑、大小、對齊方式等）跌穗、圖片的外形（寬高易核、邊框樣式歌亲、 邊距等）以及版面的布局和外觀顯示樣式等济蝉。
CSS 規(guī)則由兩個主要的部分構成：
- 選擇器
-
一條或多條聲明
image.png
注意:
- 選擇器是用于指定
CSS樣式的HTML標簽淌铐，花括號內是對該對象設置的具體樣式 - 屬性和屬性值以“鍵值對”的形式出現
- 屬性是對指定的對象設置的樣式屬性肺然，例如字體大小、文本顏色等
- 屬性和屬性值之間用英文
“:”分開 - 多個“鍵值對”之間用英文
“;”進行區(qū)分
所有的樣式腿准，都包含在 <style> 標簽內际起，表示是樣式表，<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 選擇器
選擇器就是根據不同需求把不同的標簽選出來
選擇器分為兩個大類
- 基礎選擇器
- 復合選擇器
2.1 css基礎選擇器
基礎選擇器是由單個選擇器組成的
基礎選擇器又包括：
- 標簽選擇器
- 類選擇器
- id 選擇器
- 通配符選擇器
2.1.1 標簽選擇器
標簽選擇器（元素選擇器）是指用 HTML 標簽名稱作為 選擇器街望，按標簽名稱分類，為頁面中某一類標簽指定統(tǒng)一的 CSS 樣式唇撬。
標簽選擇器可以把某一類標簽全部選擇出來它匕，比如所有的 <div> 標簽和所有的 <span> 標簽。
樣例:
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 類選擇器
如果想要差異化選擇不同的標簽窖认，單獨選一個或者某幾個標簽豫柬，可以使用類選擇器
.red {
color: red;
}
......
<div class='red'> 變紅色 </div>
類選擇器在 HTML 中以 class 屬性表示，在 CSS 中扑浸，類選擇器以一個點“.”號顯示
類選擇器可以使用多個類名烧给，多個類名中間必須用空格分開
<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 屬性來設置 id 選擇器，CSS 中 id 選擇器以“#"來定義
注意：
id 屬性只能在每個 HTML 文檔中出現一次喝噪。
測試:
<!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 通配符選擇器
通配符選擇器使用“ * ”定義础嫡，它表示選取頁面中所有元素（標簽）
通配符選擇器不需要調用，一般常用于清除所有的元素標簽的內外邊距
樣例:
* {
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復合選擇器
在CSS 中酝惧，復合選擇器是建立在基礎選擇器之上榴鼎，對基本選擇器進行組合形成的。
- 復合選擇器可以更準確晚唇、更高效的選擇目標元素（標簽）
- 復合選擇器是由兩個或多個基礎選擇器巫财，通過不同的方式組合而成的
- 常用的復合選擇器包括：
3.1) 后代選擇器
3.2) 子選擇器
3.3) 并集選擇器
3.4) 偽類選擇器等等
2.2.1 后代選擇器
后代選擇器 又稱為 包含選擇器 ，可以選擇父元素里面子元素哩陕。其寫法就是把外層標簽寫在前面平项，內層標簽寫在 后面赫舒，中間用空格分隔。當標簽發(fā)生嵌套時闽瓢，內層標簽就成為外層標簽的后代接癌。
代碼:
<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 子選擇器
子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素，簡單理解就是選親兒子元素.
代碼:
<!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 并集選擇器
并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式,各選擇器通過英文逗號","連接而成
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>復合選擇器之并集選擇器</title>
<style>
/* div,p{
color: pink;
} */
div,p,.pig {
color: pink;
}
</style>
</head>
<body>
并集選擇器可以選擇多組標簽扣讼，同時針對他們的樣式進行更改<br>
元素1缺猛，元素2，元素2{} 元素中間用英文逗號隔開届谈，逗號是“和”的意思枯夜，通常用于集體聲明；
<div>熊大</div>
<p>熊二</p>
<span>光頭強</span>
<ul class="pig">
<li>小豬佩奇</li>
<li>豬爸爸</li>
<li>豬媽媽</li>
</ul>
</body>
</html>
測試記錄:
2.2.4 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果
偽類選擇器書寫最大的特點是用冒號 ":" 表示艰山，比如 :hover 湖雹、 :first-child
偽類選擇器很多，有鏈接偽類曙搬、結構偽類等摔吏，這里先介紹的是 鏈接偽類選擇器
a {
color: gray;
}
/* 1.選中未被訪問過的鏈接 */
a:link {
color: black;
text-decoration: none;
}
/* 2.選擇已訪問的鏈接 */
a:visited {
color: red;
}
/* 3.選擇鼠標經過的鏈接(實際開發(fā)重點) */
a:hover {
color: blue;
}
/* 4.選擇鼠標按下但未彈起的鏈接 */
a:active {
color: forestgreen;
}
注意：
為了確保生效，請按照 LVHA 的循順序聲明 :link :visited :hover :active
focus 偽類選擇器：
:focus 偽類選擇器主要用于選取獲得焦點的表單元素纵装。 焦點就是光標征讲，一般情況 <input> 類表單元素才能獲取，因此這個選擇器也主要針對于表單元素來說
測試代碼:
<!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 屬性選擇器
屬性選擇器可以根據元素特定屬性的來選擇元素橡娄，這樣就可以不用借助于類或者id選擇器诗箍。
/* 1.必須是input 但是同時具有 value這個屬性 選擇這個元素 */
input[value] {
color:pink;
}
/* 2.只把 type =text 的input選取出來 */
input[type=text] {
color: pink;
}
/* 3.選擇具有class屬性，并且屬性值必須是 icon開頭 的這些元素 */
div[class^=icon] {
color: red;
}
/* 4.選擇以data結尾的某些元素 */
section[class$=data] {
color: blue;
}
/* 5.選擇屬性里含有 xd 的某些元素 */
div[class*=xd] {
color: red;
}
注意：
屬性選擇器中標簽名與屬性之間沒有空格挽唉！
2.3.2 結構偽類選擇器
結構偽類選擇器主要根據 文檔結構 來選擇器元素滤祖， 常用于根據父級選擇器里面的子元素
/* 1. 選擇ul里面的第一個孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 選擇ul里面的最后一個孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 選擇ul里面的第2個孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
/* 1.把所有的偶數 even的孩子選出來 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇數 odd的孩子選出來 */
ul li:nth-child(odd) {
background-color: gray;
}
注意：
nth-child（n）選擇某個父元素的一個或多個特定的子元素，n 是從 0 開始計算的瓶籽，可以是數字匠童，關鍵字(even odd)和公式
上面三個同理，區(qū)別在于：
-
nth-child對父元素里面所有孩子排序選擇塑顺， 先找到第n個孩子汤求，然后看看是否和E匹配 -
nth-of-type對父元素里面指定子元素進行排序選擇， 先去匹配E 严拒，然后再根據E 找第n個孩子
2.3.3 偽元素選擇器
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標簽元素扬绪，而不需要HTML標簽，從而簡化HTML結構
.fake::before {
content: '我';
}
.fake::after {
content: '小豬佩奇';
}
注意：
- before 和 after 創(chuàng)建一個元素裤唠，但是屬于行內元素
- 新創(chuàng)建的這個元素在文檔樹中是找不到的挤牛，所以我們稱為偽元素
- before 和 after 必須有 content 屬性
- before 在父元素內容的前面創(chuàng)建元素，after 在父元素內容的后面插入元素
三. 字體屬性
3.1 字體系列
CSS 使用 font-family 屬性定義文本的字體系列
div {font-family: Arial,"Microsoft Yahei", "微軟雅黑";}
各種字體之間必須使用英文狀態(tài)下的逗號隔開
一般情況下,如果有空格隔開的多個單詞組成的字體,加引號.
3.2 字體大小
CSS 使用 font-size 屬性定義字體大小
p {
font-size: 20px;
}
px（像素）大小是我們網頁的最常用的單位
谷歌瀏覽器默認的文字大小為16px
3.3 字體粗細
CSS 使用 font-weight 屬性設置文本字體的粗細
p {
font-weight: bold;
}
3.4 文字樣式
CSS 使用 font-style 屬性設置文本的風格
p {
font-style: normal;
}
3.5 字體復合屬性
字體屬性可以把以上文字樣式綜合來寫, 這樣可以更節(jié)約代碼:
body {
font: font-style font-weight font-size/line-height font-family;
}
注意:
必須按上面語法格式中的順序書寫巧骚，不能更換順序赊颠，并且各個屬性間以空格隔開
必須保留
font-size和font-family屬性，其他屬性可以省略劈彪，否則 font 屬性將不起作用
四. 文本屬性
4.1 文本顏色
color 屬性用于定義文本的顏色竣蹦。
div {
color: red;
}
有三種顏色的表示方式，開發(fā)中最常用的是十六進制
4.2 對齊文本
4.2.1 水平對齊文本
text-align 屬性用于設置元素內文本內容的水平對齊方式
div {
text-align: center;
}
4.2.2 垂直對齊文本
CSS 的 vertical-align 屬性使用場景： 經常用于設置圖片或者表單和文字垂直對齊沧奴。但是它只針對于行內元素或者行內塊元素有效
vertical-align : baseline | top | middle | bottom
解決圖片底部默認空白縫隙問題：
bug：圖片底側會有一個空白縫隙痘括，原因是行內塊元素會和文字的基線對齊。
主要解決方法有兩種：
- 給圖片添加 vertical-align:middle | top| bottom 等滔吠。 （提倡使用的）
- 把圖片轉換為塊級元素 display: block;
4.3 裝飾文本
text-decoration 屬性規(guī)定添加到文本的修飾纲菌，可以給文本添加下劃線、刪除線疮绷、上劃線等
div {
text-decoration：underline翰舌；
}
4.4 文本縮進
text-indent 屬性用來指定文本的第一行的縮進，通常是將段落的首行縮進
p {
text-indent: 2em;
}
注意：
em 是一個相對單位冬骚，就是當前元素（font-size) 1 個文字的大小, 如果當前元素沒有設置大小椅贱，則會按照父元素的 1 個文字大小。
4.5 行間距
line-height 屬性用于設置行間的距離（行高）只冻，可以控制文字行與行之間的距離.
p {
line-height: 26px;
}
注意：
line-height讓文字的行高等于盒子的高度,可以實現文字在盒子內垂直居中
4.6 文字陰影
在 CSS3 中庇麦，我們可以使用 text-shadow 屬性將陰影應用于文本
text-shadow: h-shadow v-shadow blur color;
4.7 溢出的文字省略號顯示
4.7.1 單行文本溢出顯示省略號
單行文本溢出顯示省略號--必須滿足三個條件:
/*1. 先強制一行內顯示文本*/
white-space: nowrap; （ 默認 normal 自動換行）
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號替代超出的部分*/
text-overflow: ellipsis;
4.7.2 多行文本溢出顯示省略號
多行文本溢出顯示省略號，有較大兼容性問題, 適合于webKit瀏覽器或移動端（移動端大部分是webkit內核）
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個塊元素顯示的文本的行數 */
-webkit-line-clamp: 2;
/* 設置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
4.8 CSS的注釋
CSS 中的注釋跟在HTML5中的不同喜德，它以“ /* ”開頭山橄，以“ */ ”結尾
/* 需要注釋的內容 */
五. CSS引入方式
按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：
- 內部樣式表（嵌入式）
- 行內樣式表（行內式）
- 外部樣式表（鏈接式）
5.1 內部樣式表
內部樣式表是寫到html頁面內部.舍悯，將所有的 CSS 代碼抽取出來航棱，單獨放到一個 <style> 標簽中
<style>
div {
color: red;
font-size: 12px;
}
</style>
- <style> 標簽一般會放在文檔的<head>標簽中
- 代碼結構清晰，但是并沒有實現結構與樣式完全分離
5.2 行內樣式表
行內樣式表是在元素標簽內部的 style 屬性中設定 CSS 樣式贱呐，適合于修改簡單樣式.
<div style="color: red; font-size: 12px;">青春不常在丧诺，抓緊談戀愛</div>
不推薦大量使用，只有對當前元素添加簡單樣式的時候奄薇，可以考慮使用
5.3 外部樣式表
實際開發(fā)都是外部樣式表驳阎，適合于樣式比較多的情況.
引入外部樣式表分為兩步：
- 新建一個后綴名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中馁蒂。
- 在 HTML 頁面中呵晚，使用<link> 標簽引入這個文件
<link rel="stylesheet" href="css文件路徑">
六. 元素顯示模式
元素顯示模式就是 元素（標簽）以什么方式進行顯示
HTML 元素一般分為：
- 塊元素
- 行內元素
- 行內塊元素
6.1 塊元素
常見的塊元素有<h1>~<h6>、<p>沫屡、<div>饵隙、<ul>、<ol>沮脖、<li>等金矛，其中 <div> 標簽是最典型的塊元素芯急。
塊級元素的特點：
- 自己獨占一行。
- 高度驶俊，寬度娶耍、外邊距以及內邊距都可以控制。
- 寬度默認是容器（父級寬度）的100%饼酿。
- 是一個容器及盒子榕酒，里面可以放行內或者塊級元素。
注意：
- 文字類的元素內不能使用塊級元素
-
<p>標簽主要用于存放文字故俐，因此<p>里面不能放塊級元素想鹰，特別是不能放<div> - 同理，
<h1>~<h6>等都是文字類塊級標簽药版，里面也不能放其他塊級元素
6.2 行內元素
常見的行內元素有 <a>辑舷、<strong>、<b>刚陡、<em>惩妇、<i>、<del>筐乳、<s>歌殃、<ins>、<u>蝙云、<span>等氓皱，其中 <span> 標簽是最典型的行內元素。有的地方也將行內元素稱為內聯(lián)元素勃刨。
行內元素的特點：
- 相鄰行內元素在一行上波材，一行可以顯示多個。
- 高身隐、寬直接設置是無效的廷区。
- 默認寬度就是它本身內容的寬度。
- 行內元素只能容納文本或其他行內元素贾铝。
6.3 行內塊元素
在行內元素中有幾個特殊的標簽 —— <img />隙轻、<input />、<td>垢揩，它們同時具有塊元素和行內元素的特點玖绿。 有些資料稱它們?yōu)樾袃葔K元素。
行內塊元素的特點：
- 和相鄰行內元素（行內塊）在一行上叁巨，但是他們之間會有空白縫隙斑匪。
- 默認寬度就是它本身內容的寬度（行內元素特點）。
- 高度锋勺，行高蚀瘸、外邊距以及內邊距都可以控制（塊級元素特點）狡蝶。
6.4 元素顯示模式總結
6.5 元素顯示模式轉換
有時候一個模式的元素需要另外一種模式的特性時，我們就需要元素模式的轉換
/* 轉換為塊元素 */
display: block;
/* 轉換為行內元素 */
display: inline;
/* 轉換為行內塊元素 */
display: inline-block;
七. 背景屬性
通過 CSS 背景屬性贮勃，可以給頁面元素添加背景樣式牢酵。 背景屬性可以設置背景顏色、 背景圖片衙猪、背景平鋪、背景圖片位置布近、 背景圖像固定等垫释。
7.1 背景顏色
background-color 屬性定義了元素的背景顏色
background-color: blue;
一般情況下元素背景顏色默認值是 transparent （透明），我們也可以手動指定為透明色撑瞧。
background-color:transparent;
7.2 背景圖片
background-image 屬性描述了元素的背景圖像棵譬。實際開發(fā)常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優(yōu)點是非常便于控制位置. (精靈圖也是一種運用場景)
background-image : none | url (url)
注意：
背景圖片后面的地址，千萬不要忘記加 URL预伺， 同時里面的路徑不要加引號
7.3 背景平鋪
background-repeat 屬性可以實現對背景圖像進行平鋪
background-repeat: repeat | no-repeat | repeat-x | repeat-y
7.4 背景圖片位置
background-position 屬性可以改變圖片在背景中的位置
background-position: x y;
參數代表的意思是：x 坐標和 y 坐標订咸。 可以使用 方位名詞 或者 精確單位
主要分為以下三種情況：
參數是方位名詞
1.1) 如果指定的兩個值都是方位名詞，則兩個值前后順序無關酬诀，比如 left top 和 top left 效果一致
1.2) 如果只指定了一個方位名詞脏嚷，另一個值省略，則第二個值默認居中對齊參數是精確單位
2.1) 如果參數值是精確坐標瞒御，那么第一個肯定是 x 坐標父叙，第二個一定是 y 坐標
2.2) 如果只指定一個數值，那該數值一定是 x 坐標肴裙，另一個默認垂直居中參數是混合單位
3.1) 如果指定的兩個值是精確單位和方位名詞混合使用趾唱，則第一個值是 x 坐標，第二個值是 y 坐標
7.5 背景圖像固定（背景附著）
background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動蜻懦，參數默認是scroll甜癞，后期可以制作視差滾動的效果
background-attachment : scroll | fixed
7.6 背景復合寫法
當使用簡寫屬性時，沒有特定的書寫順序,一般習慣約定順序為：
background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
7.7 背景色半透明
background: rgba(0, 0, 0, 0.3);
- 最后一個參數是 alpha 透明度宛乃，取值范圍在 0~1之間
- 我們習慣把 0.3 的 0 省略掉悠咱，寫為 background: rgba(0, 0, 0, .3);
- 背景半透明是指盒子背景半透明，盒子里面的內容不受影響
八. CSS的三大特性
CSS 有三個非常重要的三個特性：
- 層疊性
- 繼承性
- 優(yōu)先級
8.1 層疊性
相同選擇器給設置相同的樣式烤惊，此時一個樣式就會覆蓋另一個沖突的樣式
層疊性原則：
- 樣式沖突乔煞，遵循的原則是就近原則，哪個樣式離結構近柒室，就執(zhí)行哪個樣式
- 樣式不沖突渡贾，不會層疊；權重不一致時雄右，也不會層疊
8.2 繼承性
CSS中的繼承: 子標簽會繼承父標簽的某些樣式
子元素可以繼承父元素的樣式（text-空骚，font-纺讲，line-這些元素開頭的，以及color屬性）
** 行高的繼承性：**
body {
font:12px/1.5 Microsoft YaHei囤屹；
}
如果子元素沒有設置行高熬甚，則子元素的行高為：當前子元素的文字大小 * 1.5
8.3 優(yōu)先級
當同一個元素指定多個選擇器，就會有優(yōu)先級的產生肋坚。
- 選擇器相同乡括，則執(zhí)行層疊性
- 選擇器不同，則根據選擇器權重執(zhí)行
選擇器權重如下表所示：
注意
- 權重是有4組數字組成,但是不會有進位智厌。
- 可以理解為類選擇器永遠大于元素選擇器, id選擇器永遠大于類選擇器,以此類推
權重疊加
如果是復合選擇器诲泌，則會有權重疊加，需要計算權重铣鹏，例如以下幾種：
- 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 頁面中的布局元素看作是一個矩形的盒子敷扫，就是一個盛裝內容的容器。
盒子模型封裝周圍的 HTML 元素诚卸，包括：邊框葵第、外邊距、內邊距合溺、和實際內容等
9.1 邊框
9.1.1 直角邊框
border可以設置元素的邊框卒密，邊框有三部分組成:邊框寬度(粗細) 邊框樣式 邊框顏色
border : border-width || border-style || border-color
border: 1px solid red; /* 沒有順序 */
border-top: 1px solid red; /* 只設定上邊框， 其余同理 */
邊框樣式 border-style 可以設置如下值：
- none：沒有邊框即忽略所有邊框的寬度（默認值）
- solid：邊框為單實線(最為常用的)
- dashed：邊框為虛線
- dotted：邊框為點線
border-collapse 屬性控制瀏覽器繪制表格邊框的方式棠赛，它控制相鄰單元格的邊框栅受。
/* 表示相鄰邊框合并在一起 ,即邊框像素值1+1=1 */
border-collapse:collapse;
此外，邊框會額外增加盒子的實際大小恭朗，因此我們有兩種方案解決:
- 測量盒子大小的時候,不量邊框.
- 如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度
9.1.2 圓角邊框
在 CSS3 中屏镊，新增了 圓角邊框 樣式， border-radius 屬性用于設置元素的外邊框圓角痰腮。
border-radius:length;
- 參數值可以為數值或百分比的形式
- 如果是正方形而芥，想要設置為一個圓，把數值修改為高度或者寬度的一半即可膀值，或者直接寫為 50%
- 該屬性是一個簡寫屬性棍丐，可以跟四個值，分別代表左上角沧踏、右上角歌逢、右下角、左下角
9.2 內邊距
padding 屬性用于設置內邊距翘狱，即邊框與內容之間的距離亚情。
padding 屬性（簡寫屬性）可以有一到四個值：
注意：
- padding也會影響盒子實際大小矫付，此時需要讓 width/height 減去多出來的內邊距大小
- 如果遇到盒子里面字數不一樣多的時候课竣，給盒子設置padding嫡良，而不設置寬度
9.3 外邊距
margin 屬性用于設置外邊距泪酱，即控制盒子和盒子之間的距離
margin 簡寫方式代表的意義跟 padding 完全一致。
外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：
- 盒子必須指定了寬度（width）。
- 盒子左右的外邊距都設置為 auto 吼旧。
.header{
width:960px;
margin:0 auto;
}
注意：
以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素添加 text-align:center 即可
margin負值運用( 兩個盒子貼近而導致之間的邊框變粗 ):
讓每個盒子margin 往左側移動 -1px 正好壓住相鄰盒子邊框
鼠標經過某個盒子的時候未舟，提高當前盒子的層級即可（如果沒有有定位圈暗，則加相對定位（保留位置），如果有定位裕膀，則加z-index）
9.4 外邊距合并問題
使用 margin 定義塊元素的 垂直外邊距 時厂置，可能會出現外邊距的合并。 主要有兩種情況:
- 相鄰塊元素垂直外邊距的合并
- 嵌套塊元素垂直外邊距的塌陷
9.4.1 相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素（兄弟關系）相遇時魂角，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top 智绸，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和野揪，而是 取兩個值中的較大者。
解決方案：
盡量只給一個盒子添加 margin 值
9.4.2 嵌套塊元素垂直外邊距的塌陷
對于兩個嵌套關系（父子關系）的塊元素瞧栗，父元素有上外邊距同時子元素也有上外邊距斯稳，此時父元素會塌陷較大的外邊距值
解決方案：
- 為父元素定義上邊框。
- 為父元素定義上內邊距迹恐。
- 為父元素添加 overflow:hidden挣惰。
- 浮動、固定殴边，絕對定位的盒子（脫標）不會有塌陷問題
9.4.3 清除內外邊距
網頁元素很多都帶有默認的內外邊距憎茂，而且不同瀏覽器默認的也不一致。因此我們在布局前锤岸，首先要清除下網頁元素的內外邊距竖幔。
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
9.5 CSS3盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型，有2個值：分別為 content-box是偷、border-box
這樣我們 計算盒子大小的方式就發(fā)生了改變拳氢。
- box-sizing: content-box 盒子大小為 width + padding + border （以前默認的）
- box-sizing: border-box 盒子大小為 width
如果盒子模型我們改為了box-sizing: border-box ，那padding和border就不會撐大盒子了（前提padding 和border不會超過width寬度）
9.6 盒子陰影
CSS3 中新增了盒子陰影蛋铆，我們可以使用 box-shadow 屬性為盒子添加陰影
box-shadow: h-shadow v-shadow blur spread color inset;
注意：
- 默認的是外陰影(outset), 但是不可以寫這個單詞,否則造成陰影無效
- 盒子陰影不占用空間馋评，不會影響其他盒子排列。
十. 浮動
CSS 提供了三種傳統(tǒng)布局方式：普通流（標準流）刺啦、 浮動 留特、定位
所謂標準流: 就是標簽按照規(guī)定好默認方式排列.
有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局磕秤。比如行內塊元素可以實現一行顯示乳乌，但是他們之間會有大的空白縫隙，很難控制市咆。
多個塊級元素縱向排列找標準流汉操，多個塊級元素橫向排列找浮動。
10.1 浮動定義
float 屬性創(chuàng)建浮動框蒙兰，將其移動到左邊緣或右邊緣或觸及包含塊或另一個浮動框的邊緣
選擇器 { float: 屬性值; }
10.2 浮動特性
- 浮動元素會脫離標準流(脫標)
- 浮動的盒子不再保留原先的位置
- 浮動的元素會一行內顯示并且元素頂部對齊
- 浮動的元素會具有行內塊元素的特性
- 浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流磷瘤，所以一個元素浮動了，理論上其余的兄弟元素也要浮動
-
浮動元素只會壓住它下面標準流的盒子搜变，但是不會壓住下面標準流盒子里面的文字（圖片）
image.png
10.3 清除浮動
由于父級盒子很多情況下采缚，不方便給高度，但是子盒子浮動又不占有位置挠他，最后父級盒子高度為 0 時扳抽，就會影響下面的標準流盒子
- 清除浮動的本質是清除浮動元素造成的影響，策略是閉合浮動
- 如果父盒子本身有高度殖侵，則不需要清除浮動
清除浮動核心語句：clear: both
清除浮動方法主要有以下幾種：
- 額外標簽法也稱為隔墻法
- 父級添加 overflow 屬性
- 父級添加after偽元素
- 父級添加雙偽元素
10.3.1 額外標簽法
額外標簽法會在浮動元素末尾添加一個空的標簽贸呢。例如 <div style=”clear:both”></div>，或者其他標簽如<br />等拢军。
優(yōu)點： 通俗易懂楞陷，書寫方便
缺點： 添加許多無意義的標簽，結構化較差
注意：
要求這個新的空標簽必須是塊級元素茉唉。
10.3.2 父級添加 overflow
可以給 父級添加 overflow 屬性固蛾，將其屬性值設置為 hidden、 auto 或 scroll 度陆。
優(yōu)點：代碼簡潔
缺點：無法顯示溢出的部分
10.3.3 :after 偽元素法
:after 方式是額外標簽法的升級版艾凯，是給父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 專有 */ 懂傀，適配低版本瀏覽器
*zoom: 1;
}
優(yōu)點：沒有增加標簽览芳，結構更簡單
缺點：照顧低版本瀏覽器
10.3.4 雙偽元素清除浮動（推薦）
也是給父元素添加（添加完在父盒子中引用類名即可） ：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點：沒有增加標簽，結構更簡單
缺點：照顧低版本瀏覽器
十一 定位
定位可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置鸿竖，并且可以壓住其他盒子沧竟。
定位 = 定位模式 + 邊偏移 。
定位模式 用于指定一個元素在文檔中的定位方式缚忧。 邊偏移 則決定了該元素的最終位置悟泵。
11.1 定位模式
定位模式通過 CSS 的 position 屬性來設置，其值可以分為四個：
11.1.1 靜態(tài)定位 static
靜態(tài)定位是元素的默認定位方式闪水，無定位的意思
選擇器 { position: static; }
- 靜態(tài)定位按照標準流特性擺放位置糕非，它沒有邊偏移
- 靜態(tài)定位在布局時很少用到
11.1.2 相對定位 relative
相對定位是元素在移動位置的時候，是相對于它原來的位置來說的
選擇器 { position: relative; }
原來在標準流的位置 繼續(xù)占有（不脫標）
11.1.3 絕對定位 absolute
絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的
選擇器 { position: absolute; }
- 如果沒有祖先元素或者祖先元素沒有定位朽肥，則以瀏覽器為準定位禁筏。
- 如果祖先元素有定位（相對、絕對衡招、固定定位）篱昔，則以最近一級的有定位祖先元素為參考點移動位置。
- 絕對定位不再占有原先的位置（脫標）
- 絕對定位盒子居中 （不能通過 margin:0 auto） 可通過 1.left：50% 2.margin-left:自身寬度的一半實現
子絕父相：子級是絕對定位始腾，父級要用相對定位
- 子級絕對定位州刽，不會占有位置，可以放到父盒子里任何一個地方浪箭，不會影響其他的盒子穗椅。
- 父盒子需要加定位限制子盒子在父盒子內顯示。
- 父盒子布局時奶栖，需要占有位置匹表，因此父親只能是相對定位。
11.1.4 固定定位 fixed
固定定位是元素固定于瀏覽器可視區(qū)的位置宣鄙，即 可以在瀏覽器頁面滾動時元素的位置不會改變袍镀。
選擇器 { position: fixed; }
- 以瀏覽器的可視窗口為參照點移動元素。
- 跟父元素沒有任何關系框冀，不隨滾動條滾動。
- 固定定位不在占有原先的位置（脫標）敏簿。
11.1.5 粘性定位 sticky
粘性定位被認為是相對定位和固定定位的混合 指相對定位的元素滑動到某個位置后變?yōu)楣潭ǘㄎ?/p>
選擇器 { position: sticky; top: 10px; }
- 以瀏覽器的可視窗口為參照點移動元素（固定定位特點）
- 粘性定位占有原先的位置 不脫標（相對定位特點）
- 必須添加 top 明也、left、right惯裕、bottom 其中一個才有效
11.2 邊偏移
邊偏移就是定位的盒子移動到最終位置温数，有 top、bottom蜻势、left 和 right 4 個屬性
11.3 定位疊放次序 z-index
在定位布局時撑刺，可能會出現盒子重疊的情況，此時可以使用 z-index 來控制盒子的前后次序 (z軸)
選擇器 { z-index: 1; }
- 數值可以是正整數握玛、負整數或 0, 默認是 auto够傍，數值越大，盒子越靠上
- 如果屬性值相同挠铲，則按照書寫順序冕屯，后來居上
- 數字后面不能加單位
- 只有定位的盒子才有
z-index屬性
11.4 定位特殊特性
- 行內元素添加絕對或者固定定位，可以直接設置高度和寬度拂苹。
- 塊級元素添加絕對或者固定定位安聘，如果不給寬度或者高度，默認大小是內容的大小
- 絕對定位、固定定位會壓住下面標準流所有的內容（包括圖片浴韭、文字）丘喻，跟浮動不同
十二 元素的顯示與隱藏
類似于網站廣告，當我們點擊關閉就不見了念颈，但是我們重新刷新頁面泉粉，會重新出現！
本質： 讓一個元素在頁面中隱藏或者顯示出來舍肠，其主要分為三種：
- display 顯示隱藏
- visibility 顯示隱藏
- overflow 溢出顯示隱藏
12.1 display屬性
display 屬性用于設置一個元素應如何顯示搀继。
- display: none ；隱藏對象
- display：block 翠语；除了轉換為塊級元素之外叽躯，同時還有顯示元素的意思
display 隱藏元素后，不再占有原來的位置肌括。
后面應用及其廣泛点骑，搭配 JS 可以做很多的網頁特效。
12.2 visibility 可見性
visibility 屬性用于指定一個元素應可見還是隱藏谍夭。
- visibility：visible ; 元素可視
- visibility：hidden; 元素隱藏
visibility 隱藏元素后黑滴，繼續(xù)占有原來的位置。
如果隱藏元素想要原來位置紧索， 就用 visibility：hidden
如果隱藏元素不想要原來位置袁辈， 就用 display：none (用處更多 重點）
12.3 overflow 溢出
overflow 屬性指定了如果內容溢出一個元素的框（超過其指定高度及寬度）時，會發(fā)生什么
十三 精靈圖
13.1 為什么需要精靈圖
一個網頁中往往會應用很多小的背景圖像作為修飾珠漂，當網頁中的圖像過多時晚缩，服務器就會頻繁地接 收和發(fā)送請求圖片，造成服務器請求壓力過大媳危，這將大大降低頁面的加載速度荞彼。
因此，為了有效地減少服務器接收和發(fā)送請求的次數待笑，提高頁面的加載速度鸣皂，出現了 CSS 精靈技術（也稱CSS Sprites、CSS 雪碧）暮蹂。
核心原理：將網頁中的一些小背景圖像整合到一張大圖中 寞缝，這樣服務器只需要一次請求就可以了
13.2 精靈圖（sprites）的使用
- 精靈圖主要針對于小的背景圖片使用。
- 主要借助于背景位置來實現---background-position
- 一般情況下精靈圖都是負值仰泻。（注意網頁中的坐標：x向右為正方向第租，y軸向下為正方向）
- 精靈圖：盒子不動 圖片移動
十四 字體圖標
字體圖標使用場景： 主要用于顯示網頁中通用、常用的一些小圖標我纪。
精靈圖是有諸多優(yōu)點的慎宾，但是缺點很明顯丐吓。
- 圖片文件還是比較大的。
- 圖片本身放大和縮小會失真趟据。
- 一旦圖片制作完畢想要更換非常復雜券犁。
此時，有一種技術的出現很好的解決了以上問題汹碱，就是 字體圖標 iconfont 粘衬。
字體圖標 可以為前端工程師提供一種方便高效的圖標使用方式， 展示的是圖標咳促，本質屬于字體稚新。
- 如果遇到一些結構和樣式比較簡單的小圖標，就用字體圖標跪腹。
- 如果遇到一些結構和樣式復雜一點的小圖片褂删，就用精靈圖。
14.1 字體圖標推薦下載網站
- icomoon 字庫 http://icomoon.io
- 阿里 iconfont 字庫 http://www.iconfont.cn/
這里以 阿里 iconfont 字庫為例冲茸，說一下iconfont引入的操作流程：
-
首先屯阀，進入阿里 iconfont 字庫網站，選擇你想要的字體圖標轴术，點擊上面的購物車圖標
image.png 在網站的右上角有購物車按鈕难衰，選好圖標好點擊下載代碼
-
解壓代碼后，打開里面的demo_index.html文件盖袭，顯示有三種引入字體圖標的方法想罕，在這里我選用的是第三種Symbol 引用
image.png
14.1.1 Symbol 引用
這是一種全新的使用方式往枷，應該說這才是未來的主流忱叭，也是平臺目前推薦的用法千康。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
- 支持多色圖標了搭盾，不再受單色限制咳秉。
- 通過一些技巧，支持像字體那樣鸯隅，通過 font-size, color 來調整樣式澜建。
- 兼容性較差，支持 IE9+蝌以，及現代瀏覽器炕舵。
- 瀏覽器渲染 SVG 的性能一般，還不如 png跟畅。
使用步驟如下：
- 引入項目下面生成的 symbol 代碼：
<script src="./iconfont.js"></script>
- 加入通用 CSS 代碼（引入一次就行）：
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 挑選相應圖標并獲取類名咽筋，應用于頁面：
<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. 上邊框寬度要大， 右邊框 寬度稍小徊件， 其余的邊框該為 0 */
border-width: 100px 50px 0 0;
}
效果圖：
十六 CSS 用戶界面樣式
界面樣式奸攻，就是更改一些用戶操作樣式蒜危，以便提高更好的用戶體驗
16.1 鼠標樣式 cursor
設置或檢索在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀
li {cursor: pointer; }
16.2 輪廓線 outline
給表單添加 outline: 0; 或者 outline: none; 樣式之后，就可以去掉默認的藍色邊框
input {outline: none; }
16.3 防止拖拽文本域 resize
實際開發(fā)中睹耐，我們文本域右下角是不可以拖拽的
textarea{ resize: none;}
十七 Emmet 語法
Emmet語法前身是Zen coding,它使用縮寫來提高html/css的編寫速度, Vscode內部已經集成該語法
17.1 快速生成HTML結構語法
- 生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵舰褪，就可以生成 <div></div>
- 如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div
- 如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了
- 如果有兄弟關系的標簽疏橄，用 + 就可以了 比如 div+p
- 如果生成帶有類名或者id名字的占拍， 直接寫 .demo 或者 #two tab 鍵就可以了
- 如果生成的div 類名是有順序的，可以用自增符號 $
- 如果想要在生成的標簽內部寫內容可以用 { } 表示
17.2 快速生成CSS樣式語法
- 比如 w200 按tab 可以 生成 width: 200px;
- 比如 lh26px 按tab 可以生成 line-height: 26px;
十八 CSS3 的新特性
18.1 圖片變模糊
filter: 函數(); 屬性將模糊或顏色偏移等圖形效果應用于元素
例如：
filter: blur(5px); blur模糊處理 數值越大越模糊 里面必須加單位
18.2 calc 函數
calc() 函數可以在聲明CSS屬性值時執(zhí)行一些計算 括號里面可以使用 + - * / 來進行計算
width: calc(100% - 80px);
上面代碼的意思即 讓孩子的寬度永遠比父親少30px
18.3 過渡
過渡（transition)是CSS3中具有顛覆性的特征之一捎迫，我們可以在不使用 Flash 動畫或JavaScript 的情況下晃酒，當元素從一種樣式變換為另一種樣式時為元素添加效果。
過渡動畫： 是從一個狀態(tài) 漸漸的過渡到另外一個狀態(tài)
我們現在經常和 :hover 一起搭配使用
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
transition: width .5s, height .5s;
- 屬性 ： 想要變化的 css 屬性窄绒， 寬度高度 背景顏色 內外邊距都可以 贝次。如果想要寫多個屬性，利用逗號進行分割彰导； 如果想要所有的屬性都 變化過渡蛔翅， 屬性寫all 就可以。
- 花費時間：單位是 秒（必須寫單位） 比如 0.5s
- 運動曲線： 默認是 ease （可以省略）
-
何時開始 ： 單位是 秒（必須寫單位）可以設置延遲觸發(fā)時間 默認是 0s （可以省略）
image.png
