CSS2超全知識點(diǎn)總結(jié)，CSS權(quán)重！important塌陷inherit 層模型px,em和rem【詩書畫唱】
CTRL+F搜索關(guān)鍵詞條：
代碼
例子和運(yùn)行效果
PPT
適合休息時聽的學(xué)習(xí)視頻
active激活
屬性選擇器
內(nèi)聯(lián)（行內(nèi)）元素
子選擇器
通用選擇器
偽類選擇器
分組選擇器
偽類與偽元素:
after和:before
CSS權(quán)重總結(jié)
內(nèi)聯(lián)（行內(nèi)）元素
塊級元素特點(diǎn)
塊級元素、內(nèi)聯(lián)（行內(nèi)）元素和內(nèi)聯(lián)塊狀元素。
CSS繼承
important屬性的運(yùn)用
！important
?inherit 的屬性
內(nèi)聯(lián)塊狀元素
邊框
CSS布局模型
流動模型（Flow）
浮動模型 (Float)
層模型（Layer）
流動模型
浮動模型
層模型有三種形式：
絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)
浮動造成的塌陷
CSS中的單位px,em和rem
視頻筆記
鼠標(biāo)在上面就顯示角色翅膀，移走就消失翅膀的例子
特別注意：CSS權(quán)重的順序?yàn)椋?span id="s0sssss00s" class="color-purple-04">important > 內(nèi)聯(lián) > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對象 > 通配符 > 繼承。根據(jù)?CSS 規(guī)范，具體性越明確的樣式規(guī)則，權(quán)重值越高。
解決“塌陷”問題有以下三個方法（個人認(rèn)為自己寫項(xiàng)目時還是常會用以下內(nèi)容的）:
在使用float元素的父元素結(jié)束前加一個高為0寬為0且有clear:both樣式的div
在使用float元素的父元素添加overflow:hidden
使用after偽元素清除浮動
PPT START
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語言。
1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
3. JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。
樣式選擇器指明了{(lán)}中的樣式的作用對象，也就是樣式作用于網(wǎng)頁中的哪些元素。
標(biāo)簽選擇器
類選擇器
ID選擇器
子選擇器
通用選擇器
偽類選擇器
分組選擇器
偽類與偽元素:
偽元素中用的最多的就是:after和:before，我們可以用這兩個偽元素做很多效果！
嘗試一下的代碼：
a::after { content:"("attr(href) ")"; }?
a::before { content: url(logo.png); }
CSS權(quán)重的順序?yàn)椋?span id="s0sssss00s" class="color-purple-04">important > 內(nèi)聯(lián) > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對象 > 通配符 > 繼承。根據(jù) CSS 規(guī)范，具體性越明確的樣式規(guī)則，權(quán)重值越高。
CSS權(quán)重計(jì)算
選擇器權(quán)重值的計(jì)算：
A：如果規(guī)則是寫在標(biāo)簽的style屬性中（內(nèi)聯(lián)樣式），則A=1，否則，A=0. 對于內(nèi)聯(lián)樣式，由于沒有選擇器，所以 B、C、D 的值都為 0，即 A=1, B=0, C=0, D=0（簡寫為 1,0,0,0，下同）。
B：計(jì)算該選擇器中ID的數(shù)量。（例如，#header這樣的選擇器，計(jì)算為 0, 1, 0, 0）。
C：計(jì)算該選擇器中偽類及其它屬性的數(shù)量（包括類選擇器、屬性選擇器等，不包括偽元素）。 （例如， .logo[id='site-logo'] 這樣的選擇器，計(jì)算為 0, 0, 2, 0）。
D：計(jì)算該選擇器中偽元素及標(biāo)簽的數(shù)量。（例如，p:first-letter這樣的選擇器，計(jì)算為0, 0, 0, 2）。
CSS權(quán)重比較
權(quán)重值的比較：
根據(jù)規(guī)范，計(jì)算權(quán)重值時，A, B, C, D 四組值，從左到右，分組比較，如果 A 相同，比較 B, 如果 B 相同，比較 C, 如果 C 相同，比較 D, 如果 D 相同，后定義的優(yōu)先。
特殊的 !important：
在按照 ABCD 四組計(jì)算比較之外，在定義樣式的時候，還可以對某一個屬性應(yīng)用 !important。 需要特別注意的是這里的 "!" 與其在編程語言中的意義剛好相反，不是代表“不重要”而是代表“很重要”。
CSS2 規(guī)范中規(guī)定：!important 用于單獨(dú)指定某條樣式中的單個屬性。對于被指定的屬性，有!important 指定的權(quán)重值大于所有未用 !important 指定的規(guī)則。
簡單樣式權(quán)重的運(yùn)用：
important屬性的運(yùn)用：
第一個樣式的權(quán)重值為 0, 1, 1, 2，第二個樣式的權(quán)重值僅為 0, 0, 0, 2。所以應(yīng)用于相同元素時，應(yīng)該是第一個樣式生效。但是對于 color 這個屬性，由于在第二個樣式中用 !important 做了指定，因此color 將應(yīng)用第二個樣式的規(guī)則。而 font-weight 則按照規(guī)定用樣式一的規(guī)則。
CSS權(quán)重總結(jié)
一條樣式規(guī)則的整體權(quán)重值包含四個獨(dú)立的部分：[A, B, C, D];
A 表示內(nèi)聯(lián)樣式，只有 1 或者 0 兩個值；
B 表示規(guī)則中ID的數(shù)量；
C 表示規(guī)則中除了 ID、標(biāo)簽和偽元素以外的其它選擇器數(shù)量；
D 表示規(guī)則中標(biāo)簽和偽元素的數(shù)量；
比較時從高位到低位（從 A 到 D）分別比較，高位相同才需要比較低位；
有 !important 標(biāo)記的屬性權(quán)重值無視沒用 !important 指定的一切情況；
多次指定 !important 時，相互抵銷。
inherit 而來的屬性定義，優(yōu)先級低于任何直接指定的屬性值。
CSS繼承
CSS的某些樣式是具有繼承性的。繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素，而且應(yīng)用于其后代。每個屬性值還有一個可能為 inherit的值。表示元素的該樣式屬性繼承自父級元素，與父級元素的定義一致。
對于 inherit 的屬性： 繼承而來的屬性值，權(quán)重永遠(yuǎn)低于明確指定到元素的定義。只有當(dāng)一個元素的某個屬性沒有被直接指定時，才會繼承父級元素的值。
下面的例子中，樣式規(guī)則并未針對 span 標(biāo)簽指定 color 屬性， 但是 span中的文字會顯示為紅色， 這就是因?yàn)閟pan的color屬性默認(rèn)值為inherit.
在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊級元素、內(nèi)聯(lián)（行內(nèi)）元素和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>
設(shè)置display:block就是將元素顯示為塊級元素。
塊級元素特點(diǎn)：
每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（即一個塊級元素獨(dú)占一行）
元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。
內(nèi)聯(lián)（行內(nèi)）元素
塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)（行內(nèi)）元素。
內(nèi)聯(lián)（行內(nèi)）元素特點(diǎn)：
和其他元素都在一行上；
元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。
內(nèi)聯(lián)塊狀元素特點(diǎn)：
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
邊框
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個屬性)。
注意：
border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如:
border-color:#888;//前面的#號不要忘掉。
CSS布局模型
布局模型與盒模型都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基礎(chǔ)之上，又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。如果說布局模型是本，那么 CSS 布局模板就是末了，是外在的表現(xiàn)形式。?
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網(wǎng)頁中，元素有三種布局模型：
流動模型（Flow）
浮動模型 (Float)
層模型（Layer）
流動模型
流動（Flow）是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。
流動布局模型具有2個比較典型的特征：
塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會以行的形式占據(jù)位置。
在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。
浮動模型
如果想讓兩個塊狀元素并排顯示，可以通過設(shè)置元素浮動來實(shí)現(xiàn)。任何元素在默認(rèn)情況下是不能浮動的，但可以用CSS定義為浮動，如div、p、table、img等元素都可以被定義為浮動。
注意：設(shè)置浮動的同時一定要先設(shè)置塊狀元素的寬度，且需要浮動的幾個元素寬度加起來一定要小于容器元素的寬度。
層模型
如何讓html元素在網(wǎng)頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)
層模型--絕對定位（相對于父類）
如果想為元素設(shè)置層模型中的絕對定位，需要設(shè)置屬性position為absolute，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position屬性為relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響。
我們既可以使用position:absolute實(shí)現(xiàn)被設(shè)置元素相對于瀏覽器（body）的定位，也可以通過relative與absolute組合相對于其它元素進(jìn)行定位。
參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入position:relative
定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位了。
浮動造成的塌陷
使用浮動(float)時，如果父元素只包含浮動元素，那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會被忽視，但是這是一個很重要的問題。
解決“塌陷”問題有以下三個方法:
在使用float元素的父元素結(jié)束前加一個高為0寬為0且有clear:both樣式的div
在使用float元素的父元素添加overflow:hidden
使用after偽元素清除浮動
盒子模型
W3C組織建議把所有網(wǎng)頁上的對像都放在一個盒(box)中，設(shè)計(jì)師可以通過創(chuàng)建定義來控制這個盒的屬性
CSS中的單位px,em和rem
px（Pixel）是固定的像素點(diǎn)。像素px是相對于顯示器屏幕分辨率而言的
em和rem都是相對長度單位。長度不是固定的，而是會根據(jù)當(dāng)前對象內(nèi)文本的字體大小發(fā)生變化，所以更適用于響應(yīng)式布局。
em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。
rem表示全部的長度都相對于根元素，而根元素是<html>元素。所以通常做法是給html元素設(shè)置一個字體大小，然后其他元素的長度單位就為rem，這樣頁面上使用了rem單位的元素會隨著根元素的字體大小發(fā)生變化。
實(shí)現(xiàn)三角形
PPT END
視頻筆記 START
鼠標(biāo)在上面就顯示角色翅膀，移走就消失翅膀的例子
視頻筆記 END
適合休息時聽的學(xué)習(xí)視頻
https://www.bilibili.com/video/BV1cT4y1P7C3
active激活，偽類選擇器
屬性選擇器
代碼 START
例子和運(yùn)用效果
/*寫在外部文件中的樣式就叫外部式樣式*/
span {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 寫在style標(biāo)簽中的樣式就叫嵌入式樣式 -->
<style type="text/css">
p {
font-size: 30px;
color: blue;
}
</style>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<!-- 寫在元素的style屬性中的樣式就叫內(nèi)聯(lián)式樣式 -->
<div style="width: 100px;height: 100px;background-color: red;"></div>
<p>Hello world</p>
<span>測試文字</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ctx {
color: red;
}
.bg {
}
span {
color: orange;
}
/*通用選擇器*/
*{}
/*子選擇器：>表示選擇ul標(biāo)簽的兒子中間的a標(biāo)簽
? ? 空格表示選擇ul標(biāo)簽所有的后代中的a標(biāo)簽*/
ul>a {
color: red;
}
/*群組選擇器：,*/
div,input {
background-color: yellow;
}
#ctx,span {
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<a href="#">擴(kuò)展</a>
<li>語文</li>
<li>數(shù)學(xué)<a href="#">瀏覽</a></li>
<li>英語<div><h1><a href="#">PPP</a></h1></div></li>
</ul>
<div id="ctx">aaa</div>
<span class="bg">hehe</span>
<span class="bg">bbb</span>
<span class="bg">cccc</span>
<input type="text" class="bg" />
<span>lop</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#inp:active {
border: 5px red solid;
}
#inp:focus {
font-size: 50px;
}
div:hover {
color: orange;
}
a:link {
color: deeppink;
text-decoration: line-through;
}
a:visited {
color: green;
}
li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ul>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<input id="inp" type="text" />
<div>Hello world</div>
<a href="#">瀏覽</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
? ? color: red;/*0,0,0,0*/
}
div {
color: yellow;/*0,0,0,1*/
}
div span {
color: green;/*0,0,0,2*/
}
span[id] {
color:orange;/*0,0,1,1*/
}
#sp1 {
color: pink;/*0,1,0,0*/
}
</style>
</head>
<body>
<!-- 1,0,0,0 -->
<div style="color: orange;">Hello world</div>
<div>Hello
<span>A</span>
<span id="sp1">G</span>
<span>K</span>
</div>
</body>
</html>
