CSS2相關知識點

CSS的編寫位置
- 樣式種類
- 樣式表的優先級
CSS選擇器
- CSS基本選擇器
- - 通配選擇器
  - 元素選擇器
  - 類選擇器
  - ID選擇器
- 復合選擇器
- - HTML元素間的關系
  - 交集選擇器
  - 并集選擇器
  - 后代選擇器
  - 子代選擇器
  - 兄弟選擇器
  - 屬性選擇器
  - 偽類選擇器
  - 偽元素選擇器
顏色的表示
- 表示方式一：顏色名
- 表示方式二：rgb 或 rgba
- 表示方式三：HEX 或 HEXA
- 表示方式四：HSL 或 HSLA
CSS字體屬性
- 字體大小
- 字體族
- 字體風格
- 字體粗細
- 文本顏色
- 文本間距
- 文本修飾
- 文本縮進
- 文本對齊_水平
- 行高
- vertical-align
- CSS列表屬性
- CSS表格屬性
- CSS背景屬性
- CSS鼠標屬性
CSS盒子模型
- CSS長度單位
- 元素的顯示模式
- 各元素的顯示模式
- 修改元素的顯示模式
- 盒子模型的組成
- 盒子內容區
- 關于默認寬度
- 盒子內邊距（padding）
- margin注意事項
- margin塌陷問題
- margin合并問題
- 處理內容溢出
- 隱藏元素的方式
- 樣式的繼承
- 布局技巧
- 元素之間的空白問題
- 行內塊的幽靈空白問題
浮動
- 元素浮動后會有哪些影響
- 解決浮動產生的影響（清除浮動）
- 浮動相關屬性
定位
- 相對定位
- - 如何設置相對定位？
  - 相對定位的參考點在哪里？
  - 相對定位的特點：
- 絕對定位
- - 如何設置絕對定位？
  - 絕對定位的參考點在哪里？
  - 絕對定位元素的特點：
- 固定定位
- - 如何設置為固定定位？
  - 固定定位的參考點在哪里？
  - 固定定位元素的特點
- 粘性定位
- - 如何設置為粘性定位？
  - 粘性定位的參考點在哪里？
  - 粘性定位元素的特點
- 定位層級
- 定位的特殊應用
- - 讓定位元素的寬充滿包含塊
  - 讓定位元素在包含塊中居中
布局
- 版心
- 常用布局名詞
VSCode中的注釋折疊

CSS的編寫位置

樣式種類

行內樣式（又稱內聯樣式）

寫在標簽的 style 屬性中
語法：<h1 style="color:red;font-size:60px;">歡迎學習CSS</h1>
注意點：
1.style 屬性的值不能隨便寫，寫要符合 CSS 語法規范，是 名:值; 的形式。
2.行內樣式表，只能控制當前標簽的樣式，對其他標簽無效。

內部樣式

寫在 html 頁面內部，將所有的 CSS 代碼提取出來，單獨放在 <style> 標簽中。
語法：<style> h1 { color: red; font-size: 40px; } </style>
注意點：
1.<style> 標簽理論上可以放在 HTML 文檔的任何地方，但一般都放在 <head> 標簽
中。
2.此種寫法：樣式可以復用、代碼結構清晰。

外部樣式

寫在單獨的 .css 文件中，隨后在 HTML 文件中引入使用.
語法：
1.新建一個擴展名為 .css 的樣式文件，把所有 CSS 代碼都放入此文件中。
h1{ color: red; font-size: 40px; }
2.在 HTML 文件中引入 .css 文件。
<link rel="stylesheet" href="./xxx.css">
注意點：
1.<link> 標簽要寫在 <head> 標簽中。
2.<link> 標簽屬性說明：
- href ：引入的文檔來自于哪里。
- rel ：( relation ：關系）說明引入的文檔與當前文檔之間的關系。
3.外部樣式的優勢：樣式可以復用、結構清晰、可觸發瀏覽器的緩存機制，提高訪問速
度，實現了結構與樣式的完全分離。
4.實際開發中，幾乎都使用外部樣式，這是 最推薦的使用方式 ！

樣式表的優先級

優先級規則：行內樣式 > 內部樣式 = 外部樣式

內部樣式、外部樣式，這二者的優先級相同，且：后面的會覆蓋前面的（簡記：“后來
者居上”）。
同一個樣式表中，優先級也和編寫順序有關，且：后面的會覆蓋前面的（簡記：“后來
者居上”）。

CSS選擇器

CSS基本選擇器

通配選擇器
元素選擇器
類選擇器
id選擇器

通配選擇器

作用：可以選中所有的 HTML 元素。
語法：* { 屬性名: 屬性值; }
舉例：* { color: orange; font-size: 40px; }

元素選擇器

作用：為頁面中 某種元素 統一設置樣式。
語法：標簽名 { 屬性名: 屬性值; }
舉例：h1 { color: orange; font-size: 40px; } p { color: blue; font-size: 60px; }

類選擇器

作用：根據元素的 class 值，來選中某些元素。
語法：.類名 { 屬性名: 屬性值; }
舉例：.speak { color: red; } .answer { color: blue; }
注意點：
1.元素的 class 屬性值不帶 . ，但 CSS 的類選擇器要帶 . 。
2.class 值，是我們自定義的，按照標準：不要使用純數字、不要使用中文、盡量使用
英文與數字的組合，若由多個單詞組成，使用 - 做連接，例如： left-menu ，且命名
要有意義，做到 “見名知意”。
3.一個元素不能寫多個 class 屬性。
4.一個元素的 class 屬性，能寫多個值，要用空格隔開。

ID選擇器

作用：根據元素的 id 屬性值，來精準的選中某個元素。
語法：#id值 { 屬性名: 屬性值; }
舉例：#earthy { color: red; font-size: 60px; }

復合選擇器

HTML元素間的關系

父元素（直接包裹某個元素的元素，就是該元素的父元素。）
子元素（被父元素直接包含的元素。）
祖先元素（父親的父親…，一直往外找，都是祖先，父元素，也算是祖先元素的一種。）
后代元素（兒子的兒子…，一直往里找，都是后代，子元素，也算是后代元素的一種。）
兄弟元素（具有相同父元素的元素，互為兄弟元素。）

交集選擇器

作用：選中 同時符合 多個條件的元素。交集有并且的含義（通俗理解：即…又… 的意思）。
語法：選擇器1選擇器2選擇器3…選擇器n {}
舉例：

/* 選中：類名為beauty的p元素*/
p.beauty {color: blue;
}
/* 選中：類名包含rich和beauty的元素 */
.rich.beauty {color: green;
}

注意點：
1.有標簽名，標簽名必須寫在前面。
2.id 選擇器、通配選擇器，理論上可以作為交集的條件，但實際應用中幾乎不用 —— 因為沒有意義。
3.交集選擇器中不可能出現兩個元素選擇器，因為一個元素，不可能即是 p 元素 又是span 元素。
4.用的最多的交集選擇器是：元素選擇器配合類名選擇器，例如： p.beauty 。

并集選擇器

作用：選中多個選擇器對應的元素，又稱：分組選擇器。所謂并集就是或者的含義（通俗理解：要么…要么… 的意思）
語法：選擇器1, 選擇器2, 選擇器3, … 選擇器n {}
舉例：

/* 選中id為peiqi，或類名為rich，或類名為beauty的元素 */
#peiqi,
.rich,
.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}

注意點：
1.并集選擇器，我們一般豎著寫。
2.任何形式的選擇器，都可以作為并集選擇器的一部分。
3.并集選擇器，通常用于集體聲明，可以縮小樣式表體積。

后代選擇器

作用：選中指定元素中，符合要求的后代元素。
語法：選擇器1 選擇器2 選擇器3 … 選擇器n {} （先寫祖先，再寫后代）。選擇器之間，用空格隔開，空格可以理解為：" xxx 中的"，其實就是后代的意思。
舉例：

/* 選中ul中的所有li */
ul li {color: red;
}
/* 選中ul中所有li中的a */
ul li a {color: orange;
}
/* 選中類名為subject元素中的所有li */
.subject li {color: blue;
}
/* 選中類名為subject元素中的所有類名為front-end的li */
.subject li.front-end {color: blue;
}

注意點：
1.后代選擇器，最終選擇的是后代，不選中祖先。
2.兒子、孫子、重孫子，都算是后代。
3.結構一定要符合之前講的 HTML 嵌套要求，例如：不能 p 中寫 h1 ~ h6 。

子代選擇器

作用：選中指定元素中，符合要求的子元素（兒子元素）。（先寫父，再寫子）
語法：選擇器1 > 選擇器2 > 選擇器3 > … 選擇器n {}。選擇器之間，用 > 隔開， > 可以理解為：" xxx 的子代"，其實就是兒子的意思。
舉例：

/* div中的子代a元素 */
div>a {color: red;
}
/* 類名為persons的元素中的子代a元素 */
.persons>a{color: red;
}

注意點：
1.子代選擇器，最終選擇的是子代，不是父級。
2.子、孫子、重孫子、重重孫子 … 統稱后代！，子就是指兒子。

兄弟選擇器

相鄰兄弟選擇器：
- 作用：選中指定元素后，符合條件的相鄰兄弟元素。所謂相鄰，就是緊挨著他的下一個，簡記：睡在我下鋪的兄弟。
- 語法：選擇器1+選擇器2 {} 。
- 示例：

/* 選中div后相鄰的兄弟p元素 */
div+p {color:red;
}

通用兄弟選擇器：
- 作用：選中指定元素后，符合條件的 所有兄弟 元素。（簡記：睡在我下鋪的所有兄弟）。
- 語法：選擇器1~選擇器2 {} 。
- 示例：

/* 選中div后的所有的兄弟p元素 */
div~p {color:red;
}

注意點：兩種兄弟選擇器，選擇的是下面的兄弟。

屬性選擇器

作用：選中屬性值符合一定要求的元素。
語法：
1.[屬性名] 選中具有某個屬性的元素。
2.[屬性名=“值”] 選中包含某個屬性，且屬性值等于指定值的元素。
3.[屬性名^=“值”] 選中包含某個屬性，且屬性值以指定的值開頭的元素。
4.[屬性名$=“值”] 選中包含某個屬性，且屬性值以指定的值結尾的元素。
5.[屬性名*=“值”] 選擇包含某個屬性，屬性值包含指定值的元素。
舉例：

/* 選中具有title屬性的元素 */
div[title]{color:red;}
/* 選中title屬性值為atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 選中title屬性值以a開頭的元素 */
div[title^="a"]{color:red;}
/* 選中title屬性值以u結尾的元素 */
div[title$="u"]{color:red;}
/* 選中title屬性值包含g的元素 */
div[title*="g"]{color:red;}

偽類選擇器

作用：選中特殊狀態的元素。
如何理解“偽” ? — 虛假的，不是真的。
如何理解“偽類”？ — 像類( class )，但不是類，是元素的一種特殊狀態。
常用的偽類選擇器：
一、動態偽類：
1.:link 超鏈接未被訪問的狀態。
2.:visited 超鏈接訪問過的狀態。
3.:hover 鼠標懸停在元素上的狀態。
4.:active 元素激活的狀態。什么是激活？—— 按下鼠標不松開。
注意點：遵循 LVHA 的順序，即： link 、 visited 、 hover 、 active 。
5.:focus 獲取焦點的元素。表單類元素才能使用 :focus 偽類。當用戶：點擊元素、觸摸元素、或通過鍵盤的 “ tab ” 鍵等方式，選擇元素時，就是獲
得焦點。
二、結構偽類：
1.:first-child 所有兄弟元素中的第一個。
2.:last-child 所有兄弟元素中的最后一個。
3.:nth-child(n) 所有兄弟元素中的第 n 個。
4.:first-of-type 所有同類型兄弟元素中的第一個。
5.:last-of-type 所有同類型兄弟元素中的最后一個。
6.:nth-of-type(n) 所有同類型兄弟元素中的第n個。
關于n的值：
1.0 或不寫：什么都選不中 —— 幾乎不用。
2.n ：選中所有子元素 —— 幾乎不用。
3.1~正無窮的整數：選中對應序號的子元素。
4.2n 或 even ：選中序號為偶數的子元素。
5.2n+1 或 odd ：選中序號為奇數的子元素。
6.-n+3 ：選中的是前 3 個。
了解：
1.:nth-last-child(n) 所有兄弟元素中的倒數第 n 個。
2.:nth-last-of-type(n) 所有同類型兄弟元素中的倒數第n個。
3.:only-child 選擇沒有兄弟的元素（獨生子女）。
4.:only-of-type 選擇沒有同類型兄弟的元素。
5.:root 根元素。
6.:empty 內容為空元素（空格也算內容）。
三、否定偽類：
:not(選擇器) 排除滿足括號中條件的元素。
四、UI偽類：
1.:checked 被選中的復選框或單選按鈕。
2.:enable 可用的表單元素（沒有 disabled 屬性）。
3.:disabled 不可用的表單元素（有 disabled 屬性）。
五、目標偽類（了解）
:target 選中錨點指向的元素。
六、語言偽類（了解）
:lang() 根據指定的語言選擇元素（本質是看 lang 屬性的值）。

偽元素選擇器

作用：選中元素中的一些特殊位置。
常用偽元素：
- ::first-letter 選中元素中的第一個文字。
- ::first-line 選中元素中的第一行文字。
- ::selection 選中被鼠標選中的內容。
- ::placeholder 選中輸入框的提示文字。
- ::before 在元素最開始的位置，創建一個子元素（必須用 content 屬性指定內容）。
- ::after 在元素最后的位置，創建一個子元素（必須用 content 屬性指定內容）。

顏色的表示

表示方式一：顏色名

編寫方式：直接使用顏色對應的英文單詞，編寫比較簡單，例如：
1.紅色：red
2.綠色：green
3.藍色：blue
4.紫色：purple
5.橙色：orange
6.灰色：gray
…

表示方式二：rgb 或 rgba

編寫方式：使用 紅、黃、藍 這三種光的三原色進行組合。
- r 表示紅色
- g 表示綠色
- b 表示藍色
- a 表示透明度
舉例：

/* 使用 0~255 之間的數字表示一種顏色 */
color: rgb(255, 0, 0);/* 紅色 */
color: rgb(0, 255, 0);/* 綠色 */
color: rgb(0, 0, 255);/* 藍色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一種顏色 */
color:rgb(138, 43, 226) /* 紫羅蘭色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的紅色 */
/* 也可以使用百分比表示一種顏色（用的少） */
color: rgb(100%, 0%, 0%);/* 紅色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的紅色 */

表示方式三：HEX 或 HEXA

HEX 的原理同與 rgb 一樣，依然是通過：紅、綠、藍色 進行組合，只不過要用 6位（分成3組） 來表達。
格式為：# rrggbb 每一位數字的取值范圍是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,
d, e, f ）所以每一種光的最小值是： 00 ，最大值是： ff
舉例：

color: #ff0000;/* 紅色 */
color: #00ff00;/* 綠色 */
color: #0000ff;/* 藍色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每種顏色的兩位都是相同的，就可以簡寫*/
color: #ff9988;/* 可簡為：#f98 */
/* 但要注意前三位簡寫了，那么透明度就也要簡寫 */
color: #ff998866;/* 可簡為：#f986 */

注意點：IE 瀏覽器不支持 HEXA ，但支持 HEX 。

表示方式四：HSL 或 HSLA

HSL 是通過：色相、飽和度、亮度，來表示一個顏色的，格式為： hsl(色相,飽和度,亮度)
- 色相：取值范圍是 0~360 度，具體度數對應的顏色如下圖：
- 飽和度：取值范圍是 0%~100% 。（向色相中對應顏色中添加灰色， 0% 全灰， 100% 沒有灰）
- 亮度：取值范圍是 0%~100% 。（ 0% 亮度沒了，所以就是黑色。 100% 亮度太強，所以就是白色了）
HSLA 其實就是在 HSL 的基礎上，添加了透明度。

CSS字體屬性

字體大小

屬性名：font-size
作用：控制字體的大小。
語法：

div {font-size: 40px;
}

注意點：
1.Chrome 瀏覽器支持的最小文字為 12px ，默認的文字大小為 16px ，并且 0px 會自動
消失。
2.不同瀏覽器默認的字體大小可能不一致，所以最好給一個明確的值，不要用默認大
小。
3.通常以給 body 設置 font-size 屬性，這樣 body 中的其他元素就都可以繼承了。

字體族

屬性名： font-family
作用：控制字體類型。
語法：

div {font-family: "STCaiyun","Microsoft YaHei",sans-serif
}

注意點：
1.使用字體的英文名字兼容性會更好，具體的英文名可以自行查詢，或在電腦的設置里
去尋找。
2.如果字體名包含空格，必須使用引號包裹起來。
3.可以設置多個字體，按照從左到右的順序逐個查找，找到就用，沒有找到就使用后面
的，且通常在最后寫上 serif （襯線字體）或 sans-serif （非襯線字體即沒有筆畫首尾裝飾的字體）。
4.windows 系統中，默認的字體就是微軟雅黑。

字體風格

屬性名： font-style
作用：控制字體是否為斜體。
常用值：
1.normal ：正常（默認值）
2.italic ：斜體（使用字體自帶的斜體效果）實現斜體時，更推薦使用 italic 。
3.oblique ：斜體（強制傾斜產生的斜體效果）
語法：

div {font-style: italic;
}

字體粗細

屬性名： font-weight
作用：控制字體的粗細。
常用值：
- 關鍵詞
  1.lighter ：細
  2.normal ：正常
  3.bold ：粗
  4.bolder ：很粗（多數字體不支持）
- 數值：
  1.100~1000 且無單位，數值越大，字體越粗（或一樣粗，具體得看字體設計時的
  精確程度）。
  2.100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于
  bold 。
語法：

div {font-weight: bold;
}
div {font-weight: 600;
}

文本顏色

屬性名： color
作用：控制文字的顏色。
可選值：
1.顏色名
2.rgb 或 rgba
3.HEX 或 HEXA （十六進制）
4.HSL 或 HSLA
舉例：

div {color: rgb(112,45,78);
}

文本間距

字母間距： letter-spacing
單詞間距： word-spacing （通過空格識別詞）
屬性值為像素（ px ），正值讓間距增大，負值讓間距縮小。

文本修飾

屬性名： text-decoration
作用：控制文本的各種裝飾線。
可選值：
1.none ：無裝飾線（常用）
2.underline ：下劃線（常用）
3.overline ：上劃線
4.line-through ：刪除線
可搭配如下值使用：
1.dotted ：虛線
2.wavy ：波浪線
3.也可以指定顏色
舉例：

a {text-decoration: none;
}

文本縮進

屬性名： text-indent 。
作用：控制文本首字母的縮進。
屬性值： css 中的長度單位，例如： px
舉例：

div {text-indent:40px;
}

文本對齊_水平

屬性名： text-align 。
作用：控制文本的水平對齊方式。
常用值：
1.left ：左對齊（默認值）
2.right ：右對齊
3.center ：居中對齊
舉例：

div {text-align: center;
}

行高

屬性名： line-height
作用：控制一行文字的高度。
可選值：
1.normal ：由瀏覽器根據文字大小決定的一個默認值。
2.像素( px )。
3.數字：參考自身 font-size 的倍數（很常用）。
4.百分比：參考自身 font-size 的百分比。
備注：由于字體設計原因，文字在一行中，并不是絕對垂直居中，若一行中都是文字，不會太影響觀感。
舉例：

div {line-height: 60px;line-height: 1.5;line-height: 150%;
}

應用場景：
1.對于多行文字：控制行與行之間的距離。
2.對于單行文字：讓 height 等于 line-height ，可以實現文字垂直居中

vertical-align

屬性名： vertical-align 。
作用：用于指定同一行元素之間，或 表格單元格 內文字的 垂直對齊方式。
常用值：
1.baseline （默認值）：使元素的基線與父元素的基線對齊。
2.top ：使元素的頂部與其所在行的頂部對齊。
3.middle ：使元素的中部與父元素的基線加上父元素字母 x 的一半對齊。
4.bottom ：使元素的底部與其所在行的底部對齊。
特別注意： vertical-align 不能控制塊元素。

CSS列表屬性

CSS 屬性名	功能	屬性值
list-style-type	設置列表符號	常用值如下：none ：不顯示前面的標識（很常用！）; square ：實心方塊disc ：圓形; decimal ：數字lower-roman ：小寫羅馬字; upper-roman ：大寫羅馬字; lower-alpha ：小寫字母upper-alpha ：大寫字母
list-style-position	設置列表符號的位置	inside ：在 li 的里面; outside ：在 li 的外邊
list-style-image	自定義列表符號	url(圖片地址)
list-style	復合屬性	沒有數量、順序的要求

CSS表格屬性

邊框相關屬性（其他元素也能用）：

CSS 屬性名	功能	屬性值
border-width	邊框寬度	CSS 中可用的長度值
border-color	邊框顏色	CSS 中可用的顏色值
border-style	邊框風格	none 默認值； solid 實線； dashed 虛線； dotted 點線； double 雙實線
border	邊框復合屬性	沒有數量、順序的要求

表格獨有屬性（只有 table 標簽才能使用）：

CSS 屬性名	功能	屬性值
table-layout	設置列寬度	auto ：自動，列寬根據內容計算（默認值）；fixed ：固定列寬，平均分。
border-spacing	單元格間距	CSS 中可用的長度值。生效的前提：單元格邊框不能合并。
border-collapse	合并單元格邊框	collapse ：合并； separate ：不合并
empty-cells	隱藏沒有內容的單元格	show ：顯示，默認；hide ：隱藏；生效前提：單元格不能合并。
caption-side	設置表格標題位置	top ：上面（默認值）；bottom ：在表格下面

以上 5 個屬性，只有表格才能使用，即：<table> 標簽。

CSS背景屬性

css 屬性名	功能	屬性值
background-color	設置背景顏色	符合 CSS 中顏色規范的值。默認背景顏色是 transparent 。
background-image	設置背景圖片	url(圖片的地址)
background-repeat	設置背景重復方式	repeat ：重復，鋪滿整個元素，默認值。repeat-x ：只在水平方向重復。repeat-y ：只在垂直方向重復。no-repeat ：不重復。
background-position	設置背景圖位置	通過關鍵字設置位置：寫兩個值，用空格隔開。水平： left 、 center 、 right。垂直: top 、 center 、 bottom。如果只寫一個值，另一個方向的值取 center。通過長度指定坐標位置：以元素左上角，為坐標原點，設置圖片左上角的位置。兩個值，分別是 x 坐標和 y 坐標。只寫一個值，會被當做 x 坐標， y 坐標取center
background	復合屬性	沒有數量和順序要求

CSS鼠標屬性

CSS 屬性名	功能	屬性值
cursor	設置鼠標光標的樣式	pointer ：小手；move ：移動圖標；text ：文字選擇器；crosshair ：十字架；wait ：等待；help ：幫助

擴展

/* 自定義鼠標光標 */
cursor: url("./arrow.png"),pointer;

CSS盒子模型

CSS長度單位

1.px ：像素。
2.em ：相對元素 font-size 的倍數。
3.rem ：相對根字體大小，html標簽就是根。
4.% ：相對父元素計算。

注意點： CSS 中設置長度，必須加單位，否則樣式無效！

元素的顯示模式

塊元素（block）
又稱：塊級元素
特點：
1.在頁面中 獨占一行，不會與任何元素共用一行，是從上到下排列的。
2.默認寬度：撐滿 父元素。
3.默認高度：由內容撐開。
4.可以通過 CSS 設置寬高。
行內元素（inline）
又稱：內聯元素
特點:
1.在頁面中 不獨占一行 ，一行中不能容納下的行內元素，會在下一行繼續從左到右排
列。
2.默認寬度：由內容撐開。
3.默認高度：由內容撐開。
4.無法通過 CSS 設置寬高。
行內塊元素（inline-block）
又稱：內聯塊元素
特點：
1.在頁面中 不獨占一行 ，一行中不能容納下的行內元素，會在下一行繼續從左到右排
列。
2.默認寬度：由內容撐開。
3.默認高度：由內容撐開。
4.可以通過 CSS 設置寬高。

各元素的顯示模式

塊元素（block）

主體結構標簽： <html> 、<body>
排版標簽： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表標簽： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相關標簽： <table> 、<tbody> 、 <thead> 、<tfoot> 、 <tr> 、<caption>
<form> 與 <option>

行內元素（inline）

文本標簽：<br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、<ins>
<a> 與 <label>

行內塊元素（inline-block）

圖片： <img>
單元格：<td> 、<th>
表單控件： <input> 、 <textarea> 、<select> 、 <button>
框架標簽： <iframe>

修改元素的顯示模式

通過 CSS 中的 display 屬性可以修改元素的默認顯示模式，常用值如下：

值	描述
none	元素會被隱藏。
block	元素將作為塊級元素顯示。
inline	元素將作為內聯元素顯示。
inline-block	元素將作為行內塊元素顯示。

盒子模型的組成

CSS 會把所有的 HTML 元素都看成一個盒子，所有的樣式也都是基于這個盒子。

margin（外邊距）：盒子與外界的距離。
border（邊框）：盒子的邊框。
padding（內邊距）：緊貼內容的補白區域。
content（內容）：元素中的文本或后代元素都是它的內容。
圖示如下：

盒子的大小 = content + 左右 padding + 左右 border 。
注意點：外邊距 margin 不會影響盒子的大小，但會影響盒子的位置。

盒子內容區

CSS 屬性名	功能	屬性值
width	設置內容區域寬度	長度
max-width	設置內容區域的最大寬度	長度
min-width	設置內容區域的最小寬度	長度
height	設置內容區域的高度	長度
max-height	設置內容區域的最大高度	長度
min-height	設置內容區域的最小高度	長度

注意點：
1.max-width 、 min-width 一般不與 width 一起使用。
2.max-height 、 min-height 一般不與 height 一起使用。

關于默認寬度

所謂的默認寬度，就是 不設置 width 屬性 時，元素所呈現出來的寬度。
總寬度 = 父的 content — 自身的左右 margin 。
內容區的寬度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。

盒子內邊距（padding）

padding 復合屬性的使用規則：

padding: 10px; 四個方向內邊距都是 10px 。
padding: 10px 20px; 上 10px ，左右 20px 。（上下、左右）
padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、
下、左）

注意點：

padding 的值 不能為負數。
行內元素 的左右內邊距是沒問題的，上下內邊距不能完美的設置。
塊級元素、行內塊元素，四個方向內邊距都可以完美設置。

margin注意事項

子元素的 margin ，是參考父元素的 content 計算的。（因為是父親的 content 中承裝著
子元素）
上 margin 、左 margin ：影響自己的位置；下 margin 、右 margin ：影響后面兄弟元素
的位置。
塊級元素、行內塊元素，均可以完美地設置四個方向的 margin ；但行內元素，左右
margin 可以完美設置，上下 margin 設置無效。
margin 的值也可以是 auto ，如果給一個塊級元素設置左右 margin 都為 auto ，該塊級
元素會在父元素中水平居中。
margin 的值 可以是負值 。

margin塌陷問題

解釋：第一個子元素的上 margin 會作用在父元素上，最后一個子元素的下 margin 會作用在父元素上。
如何解決 margin 塌陷？
方案一：給父元素設置不為 0 的 padding 。
方案二：給父元素設置寬度不為 0 的 border 。
方案三：給父元素設置 css 樣式 overflow:hidden

margin合并問題

解釋：上面兄弟元素的下外邊距和下面兄弟元素的上外邊距會合并，取一個最大的值，而不是相加。
如何解決 margin 塌陷？
無需解決，布局的時候上下的兄弟元素，只給一個設置上下外邊距就可以了。

處理內容溢出

CSS 屬性名	功能	屬性值
overflow	溢出內容的處理方式	visible ：顯示，默認值；hidden ：隱藏；scroll ：顯示滾動條，不論內容是否溢出；auto ：自動顯示滾動條，內容不溢出不顯示
overflow-x	水平方向溢出內容的處理方式	同 overflow
overflow-y	垂直方向溢出內容給的處理方式	同 overflow

注意點：
1.overflow-x 、 overflow-y 不能一個是 hidden ，一個是 visible ，是實驗性屬性，不
建議使用。
2.overflow 常用的值是 hidden 和 auto ，除了能處理溢出的顯示方式，還可以解決很多
疑難雜癥。

隱藏元素的方式

方式一：visibility 屬性
visibility 屬性默認值是 show ，如果設置為 hidden ，元素會隱藏。
元素看不見了，還占有原來的位置（元素的大小依然保持）。
方式二： display 屬性
設置 display:none ，就可以讓元素隱藏。
徹底地隱藏，不但看不見，也不占用任何位置，沒有大小寬高。

樣式的繼承

會繼承的 css 屬性
字體屬性、文本屬性（除了vertical-align）、文字顏色等。
不會繼承的 css 屬性
邊框、背景、內邊距、外邊距、寬高、溢出方式等。
規律：能繼承的屬性，都是不影響布局的，簡單說：都是和盒子模型沒關系的

布局技巧

行內元素、行內塊元素，可以被父元素當做文本處理。
即：可以像處理文本對齊一樣，去處理：行內、行內塊在父元素中的對齊。
例如： text-align 、 line-height 、 text-indent 等。
如何讓子元素，在父親中 水平居中：

- 若子元素為 塊元素 ，給父元素加上： margin:0 auto; 。
- 若子元素為 行內元素、行內塊元素 ，給父元素加上： text-align:center 。

如何讓子元素，在父親中 垂直居中：
若子元素為 塊元素，給子元素加上： margin-top ，值為： (父元素 content －子元素盒子總高) / 2
若子元素為 行內元素、行內塊元素：
讓父元素的 height = line-height ，每個子元素都加上： vertical-align:middle; 。

補充：若想絕對垂直居中，父元素 font-size 設置為 0 。

元素之間的空白問題

產生的原因：
行內元素、行內塊元素，彼此之間的換行會被瀏覽器解析為一個空白字符。
解決方案：
1.方案一：去掉換行和空格（不推薦）。
2.方案二：給父元素設置 font-size:0 ，再給需要顯示文字的元素，單獨設置字體大小（推
薦）。

行內塊的幽靈空白問題

產生原因：
行內塊元素與文本的基線對齊，而文本的基線與文本最底端之間是有一定距離的。
解決方案：
1.方案一：給行內塊設置 vertical ，值不為 baseline 即可，設置為 middel 、 bottom 、
top 均可。
2.方案二：若父元素中只有一張圖片，設置圖片為 display:block 。
3.方案三：給父元素設置 font-size: 0 。如果該行內塊內部還有文本，則需單獨設置 font-size 。

浮動

元素浮動后會有哪些影響

對兄弟元素的影響：后面的兄弟元素，會占據浮動元素之前的位置，在浮動元素的下面；對前面的兄弟無影響。
對父元素的影響：不能撐起父元素的高度，導致父元素高度塌陷；但父元素的寬度依然束縛浮動的元素。

解決浮動產生的影響（清除浮動）

解決方案：

方案一：給父元素指定高度。
方案二：給父元素也設置浮動，帶來其他影響。
方案三：給父元素設置 overflow:hidden 。
方案四：在所有浮動元素的最后面，添加一個塊級元素，并給該塊級元素設置 clear:both 。
方案五：給浮動元素的父元素，設置偽元素，通過偽元素清除浮動，原理與方案四相同。===> 推薦使用

.parent::after {content: "";display: block;clear:both;
}

布局中的一個原則：設置浮動的時候，兄弟元素要么全都浮動，要么全都不浮動。

浮動相關屬性

CSS 屬性	功能	屬性值
float	設置浮動	left : 設置左浮動；right : 設置右浮動；none ：不浮動，默認值
clear	清除浮動；清除前面兄弟元素浮動元素的響應	left ：清除前面左浮動的影響；right ：清除前面右浮動的影響；both ：清除前面左右浮動的影響

定位

相對定位

如何設置相對定位？

給元素設置 position:relative 即可實現相對定位。
可以使用 left 、 right 、 top 、 bottom 四個屬性調整位置。

相對定位的參考點在哪里？

相對自己原來的位置

相對定位的特點：

1.不會脫離文檔流，元素位置的變化，只是視覺效果上的變化，不會對其他元素產生任何影響。
2.定位元素的顯示層級比普通元素高，無論什么定位，顯示層級都是一樣的。

默認規則是：
- 定位的元素會蓋在普通元素之上。
- 都發生定位的兩個元素，后寫的元素會蓋在先寫的元素之上。

3.left 不能和 right 一起設置， top 和 bottom 不能一起設置。
4.相對定位的元素，也能繼續浮動，但不推薦這樣做。
5.相對行為的元素，也能通過 margin 調整位置，但不推薦這樣做。

注意點：絕大多數情況下，相對定位，會與絕對定位配合使用。

絕對定位

如何設置絕對定位？

給元素設置 position: absolute 即可實現絕對定位。
可以使用 left 、 right 、 top 、 bottom 四個屬性調整位置。

絕對定位的參考點在哪里？

參考它的 包含塊。
什么是包含塊？
1.對于沒有脫離文檔流的元素：包含塊就是父元素；
2.對于脫離文檔流的元素：包含塊是第一個擁有定位屬性的祖先元素（如果所有祖先都
沒定位，那包含塊就是整個頁面）。

絕對定位元素的特點：

脫離文檔流，會對后面的兄弟元素、父元素有影響。
left 不能和 right 一起設置， top 和 bottom 不能一起設置。
絕對定位、浮動不能同時設置，如果同時設置，浮動失效，以定位為主。
絕對定位的元素，也能通過 margin 調整位置，但不推薦這樣做。
無論是什么元素（行內、行內塊、塊級）設置為絕對定位之后，都變成了定位元素。

何為定位元素？ —— 默認寬、高都被內容所撐開，且能自由設置寬高。

固定定位

如何設置為固定定位？

給元素設置 position: fixed 即可實現固定定位。
可以使用 left 、 right 、 top 、 bottom 四個屬性調整位置。

固定定位的參考點在哪里？

參考它的視口
什么是視口？—— 對于 PC 瀏覽器來說，視口就是我們看網頁的那扇“窗戶”。

固定定位元素的特點

脫離文檔流，會對后面的兄弟元素、父元素有影響。
left 不能和 right 一起設置， top 和 bottom 不能一起設置。
固定定位和浮動不能同時設置，如果同時設置，浮動失效，以固定定位為主。
固定定位的元素，也能通過 margin 調整位置，但不推薦這樣做。
無論是什么元素（行內、行內塊、塊級）設置為固定定位之后，都變成了定位元素。

粘性定位

如何設置為粘性定位？

給元素設置 position:sticky 即可實現粘性定位。
可以使用 left 、 right 、 top 、 bottom 四個屬性調整位置，不過 最常用的是 top 值。

粘性定位的參考點在哪里？

離它最近的一個擁有“滾動機制”的祖先元素，即便這個祖先不是最近的真實可滾動祖先。

粘性定位元素的特點

不會脫離文檔流，它是一種專門用于窗口滾動時的新的定位方式。
最常用的值是 top 值。
粘性定位和浮動可以同時設置，但不推薦這樣做。
粘性定位的元素，也能通過 margin 調整位置，但不推薦這樣做。
粘性定位和相對定位的特點基本一致，不同的是：粘性定位可以在元素到達某個位置時將其固定。

定位層級

定位元素的顯示層級比普通元素高，無論什么定位，顯示層級都是一樣的。
如果位置發生重疊，默認情況是：后面的元素，會顯示在前面元素之上。
可以通過 css 屬性 z-index 調整元素的顯示層級。
z-index 的屬性值是數字，沒有單位，值越大顯示層級越高。
只有定位的元素設置 z-index 才有效。
如果 z-index 值大的元素，依然沒有覆蓋掉 z-index 值小的元素，那么請檢查其包含塊的層級。

定位的特殊應用

注意點：
1.發生固定定位、絕對定位后，元素都變成了定位元素，默認寬高被內容撐開，且依然可以設
置寬高。
2.發生相對定位后，元素依然是之前的顯示模式。
3.以下所說的特殊應用，只針對 絕對定位 和 固定定位 的元素，不包括相對定位的元素。

讓定位元素的寬充滿包含塊

塊寬想與包含塊一致，可以給定位元素同時設置 left 和 right 為 0 。
高度想與包含塊一致， top 和 bottom 設置為 0 。

讓定位元素在包含塊中居中

方案一：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：

left: 50%;
top: 50%;
margin-left: 負的寬度一半;
margin-top: 負的高度一半;

注意點：該定位的元素必須設置寬高！！！

布局

版心

在 PC 端網頁中，一般都會有一個固定寬度且水平居中的盒子，來顯示網頁的主要內容，這是網頁的版心。
版心的寬度一般是 960 ~ 1200 像素 之間。
版心可以是一個，也可以是多個。

常用布局名詞

位置
頂部導航條	topbar
頁頭	header 、 page-header
導航	nav 、 navigator 、 navbar
搜索框	search 、 search-box
橫幅、廣告、宣傳圖	banner
主要內容	content 、 main
側邊欄	aside 、 sidebar
頁腳	footer 、 page-footer