CSS3知識點複習與總結
文章目錄
- CSS3知識點複習與總結
- 一、術語解釋
- 二、CSS書寫位置
- 三、常見樣式聲明
- color（元素內部文字顏色）
- background-color（元素背景顏色）
- font-size（元素內部文字尺寸大小）
- font-weight（文字粗細程度）
- font-family（文字類型）
- font-style（字體樣式，通常用來設置斜體）
- text-decoration（文本修飾，給文本加線）
- text-indent（首行文本縮進）
- line-height（行文本高度）
- width和height（寬度和高度）
- letter-spacing（文字間隙）
- text-align（元素內部文字水平排列方式）
- 樣式補充（透明度、盒子隱藏、鼠標、背景圖）
- 四、選擇器
- 五、層疊（解決聲明衝突的過程）
- 六、繼承（子元素會繼承父元素的某些CSS屬性）
- 七、屬性值的計算過程
- 1、確定聲明值：參考樣式表中沒有衝突的聲明，作爲CSS屬性值
- 2、 層疊衝突：對樣式表有衝突的聲明使用重疊規則，確定CSS屬性值
- 3、使用繼承：對仍然沒有屬性的值，若可以繼承，則繼承父元素的值
- 4、使用默認值：對仍然沒有屬性的值，使用默認值
- 八、盒模型
- 盒子的組成部分
- 盒模型的應用
- 1、改變寬高範圍（box-sizing）
- 2、改變背景覆蓋範圍（background-clip）
- 3、溢出處理（overflow）
- 4、斷詞規則（word-break）
- 5、空白處理（white-space）
- 行盒盒模型
- 九、常規流
- 十、浮動
- 十一、定位（手動控制元素在包含塊中的精準位置）
一、術語解釋
CSS規則 = 選擇器 + 聲明塊
選擇器：用來選中元素
- 元素選擇器：使用元素名選擇（
h1{}） - ID選擇器：指定元素ID進行選擇（
#id{}） - 類選擇器：選中所有聲明此類名的元素（
.red{}）
聲明塊：出現在大括號中，用來聲明樣式
二、CSS書寫位置
1、內部樣式表
通常書寫在HTML頁面的
<head>中，其實寫在<body>中也可以，但要注意寫在正文前面，先加載樣式，後加載內容。
渡一袁進（比喻鬼才）：樣式如果寫在body最後，加載網頁就好像先出來一個沒有化妝的，過了一會才化好妝，視覺體驗極差
在代碼量少的時候，200行以內，可以使用內部樣式表，可以提高第一次訪問的響應速度，因爲少加載了一個CSS文件。
<style>
h1{}
</style>
2、內聯樣式表，元素樣式表
<h1 style="color: gray; background-color: hotpink">現在開始添加樣式</h1>
3、外部樣式表
將樣式書寫在獨立的CSS文件中
<link rel="stylesheet" href="css/1.css">
爲什麼推薦使用外部樣式表
- 外部樣式表可以解決多頁面樣式重複的問題（便於維護）
- 有利於瀏覽器緩存，提高頁面響應速度
- 有利於代碼分離（HTML和CSS），更容易閱讀和維護
三、常見樣式聲明
color（元素內部文字顏色）
- 預設值，常見的顏色單詞，如red，blue
- 三原色，色值：（光學三原色，紅綠藍），每個顏色0-255，組合成色值.
- RGB表示法
rgb(0,255,0) - hex16進製表示法：
##FF4400（紅綠藍）
background-color（元素背景顏色）
background-color: #008c8c;
font-size（元素內部文字尺寸大小）
用到兩種單位：像素px、em
- 像素px，絕對單位
- em，相對單位，相對於父元素的字體大小
每個元素都必須有字體大小，如果沒有聲明，則使用父元素的字體大小，如果沒有父元素（HTML），則使用基準字號，基準字號在瀏覽器設置中。
font-weight（文字粗細程度）
可以使用數字和預設值（單詞），默認值爲“normal=400”
- 數字：默認爲400，加粗爲700
- 預設值：常用normal，bold
- strong也有加粗的效果
font-weight: bold;
<strong>表示重要的不能忽略 的內容</strong>
font-family（文字類型）
字體類型必須用戶計算機中存在纔有效，因此通常匹配多個字體
通常在末尾加上 sans-serif，如果其他字體都沒有，則使用電腦上有的非襯線字體
font-family: consolas,'Times New Roman', Times, serif,微軟雅黑,sans-serif;
font-style（字體樣式，通常用來設置斜體）
i元素默認傾斜；但是實際使用中，通常用它表示一個圖標
em 強調內容，樣式爲斜體
font-style: italic;
<i>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit, magni.</i>
<em>表示強調的內容，表示爲斜體</em>
text-decoration（文本修飾，給文本加線）
- none，用於去掉超鏈接的下劃線
- line-through，刪除線
- underline，加下劃線
del元素表示錯誤的內容，樣式裏面有刪除線
s元素表示已經過期的信息，可以在商品原價上用
text-decoration: underline;
text-indent（首行文本縮進）
style="text-indent:2em " #縮進兩個中文字符寬度
line-height（行文本高度）
值越大，每行文本之間的距離就越大
設置爲容器的高度，可以讓單行文本垂直居中
行高可以設置爲純數字，表示當前元素字體大小的倍數
line-height: 1.5;
width和height（寬度和高度）
letter-spacing（文字間隙）
letter-spacing: 1em;
text-align（元素內部文字水平排列方式）
text-align: center
樣式補充（透明度、盒子隱藏、鼠標、背景圖）
透明度、鼠標樣式
設置整個元素的透明度（包含所有子元素，文字，都會變得透明）
p{
background-color: black;
opacity: .5;
}
在顏色位置設置阿爾法通道改變透明度
鼠標樣式
cursor: pointer;
cursor:url("img/1.ico");
盒子隱藏
.box1{
display: none;
#改變display屬性，不再是盒子了
visibility: hidden;
#這個屬性是生成盒子，但是顯示隱藏，一個隱身的盒子
}
背景圖片
- img術語HTML的概念（當圖片屬於網頁內容的時候，必須使用img元素）
- 背景圖屬於CSS的概念（當圖片僅用於美化頁面時，必須使用背景圖）
背景圖片涉及的CSS屬性
background-image: url();
#控制圖片重複
background-repeat: no-repeat;
#保證圖片尺寸完整顯示
background-size: contain;
cover：保證比例不變，撐滿，會有部分顯示不出來
#尺寸：支持百分比和像素
background-size: 100% 100%;
#設置位置
background-position: center;
#背景圖相對於視口固定
background-attachment: fixed;
四、選擇器
簡單選擇器
1、ID選擇器
#p1{
color: red;
}
2、元素選擇器
h2{
background-color: #008c8c;
text-align: center
}
3、類選擇器
.blue{
background-color: #008c8c;
}
4、通配符選擇器（選中所有元素）
*{
color: yellow;
}
5、屬性選擇器（根據屬性名和屬性值選中元素）
/* 選中所有具有href屬性的元素 */
[href]{
color: red;
text-decoration-line: none;
}
/* 屬性加屬性值 */
[href="qq"]{
color: skyblue;
}
6、僞類選擇器（選中某些元素的某種狀態）
- hover 鼠標懸停狀態（常用，很多元素都可以用，懸停上去變大）
- active 鼠標按下狀態，激活狀態
- link 超鏈接未被訪問時的狀態
- visited 超鏈接被訪問過的狀態
first-child / last-child / first_of_-type / nth-child /nth-of-type
li:first-child 選中子元素中第一個li元素 ， 注意中間沒有內容是 並 的意思
li:first-child{
color: red;
}
選中ul下面的第一個li
.box1 ul :first-child{
color: blue;
}
.box1 ul :nth-child(2){
color: red;
}
.box1 ul li:nth-of-type(2){
color: red;
}
書寫順序：link、visited、hover、active
a:link{
text-decoration: none;
color: black;
}
a:visited{
color: skyblue;
}
a:hover{
color: red;
font-size: 2em;
}
a:active{
color: blue;
}
- focus ------- 聚焦時的樣式
- checked — 單選或者多選被選中時的樣式
input:focus{
outline: none;
border: 5px solid red;
}
單選多選框樣式無法控制，但是可以使用checked來控制單選框後面的label的樣式
7、僞元素選擇器
在某個元素的內部的最前面或最後面增加一個子元素並設置樣式
h2::before{
content: "~~~~~~《";
color:red;
}
h2::after{
content: "》~~~~~~";
color:red;
}
first-letter / first-line / selection
selection:選中被用戶框選的文字
p::first-letter{
font-size: 2em;
color: red;
}
p::first-line{
color: #008c8c;
}
p::selection{
color: skyblue;
}
選擇器的組合
1、並且（兩個選擇器連着寫）
p#p1{
color:red;
}
2、後代元素（加空格）（找兒子找孫子都行）
div h2{
color:red;
}
#p1 li{
color:#008c8c;
}
3、子元素（a>b）（b必須是a的兒子）
4、相鄰兄弟元素（a+b）
h2+p{
color:#008c8c;
}
5、後面出現的所有兄弟元素（a~b）
.blue h2~p{
color:red;
}
選擇器的並列（多個選擇器，用“,”分隔）（a,b都使用同一個樣式）
.blue h2~p,h2{
color:red;
}
五、層疊（解決聲明衝突的過程）
聲明衝突：同一個樣式，多次應用到同一個元素
層疊的瀏覽器自動處理過程
1、比較重要性（權重從高到低）
- 作者樣式表中加了!important的屬性
h2{background-color: #008c8c !important;} - 作者樣式表中的普通樣式
- 瀏覽器默認樣式表
2、比較特殊性 （看選擇器）
總體規則：選擇器選中的範圍越窄，越特殊（類和ID選擇器 總是 比 元素選擇器 特殊）
具體規則：通過選擇器，計算出一個四位數（XXXX）
- 千位：如果是內聯樣式，記1，否則，記0
- 百位：等於選擇器中所有ID選擇器的數量，可以有多個ID
- 十位：等於選擇器中所有類選擇器、屬性選擇器、僞類選擇器的數量
- 個位：等於選擇器中所有元素選擇器、僞類選擇器的數量（body a 選擇器（0002） 大於 a選擇器（0001））
3、比較源次序（代碼書寫靠後的勝出）
應用
- 重置樣式表（書寫作者樣式表，覆蓋瀏覽器默認樣式表）（網上有專用的重置樣式表）
- 愛恨法則（lvha）（link、visited、hover、active）
六、繼承（子元素會繼承父元素的某些CSS屬性）
通常跟文字內容相關的屬性，可以繼承
七、屬性值的計算過程
瀏覽器是一個元素一個元素依次渲染
渲染每個元素的前提條件是：該元素的所有CSS屬性必須都有值
+-----------------------------------------------------------+
一個元素，從屬性都沒有值到全部有值的計算過程 叫做 屬性值的計算過程
+-----------------------------------------------------------+
聲明值 = 開發者寫的 + 瀏覽器默認樣式
1、確定聲明值：參考樣式表中沒有衝突的聲明，作爲CSS屬性值
2、 層疊衝突：對樣式表有衝突的聲明使用重疊規則，確定CSS屬性值
3、使用繼承：對仍然沒有屬性的值，若可以繼承，則繼承父元素的值
4、使用默認值：對仍然沒有屬性的值，使用默認值
小問題：爲什麼 div 裏面的 a 元素不會繼承 div 的color屬性值，而p元素會？
答：p元素在確定聲明值這一步沒有color，只能繼承父元素的
------a元素在第一步確定聲明值的過程中，使用了瀏覽器的默認樣式，所以color屬性已經確定
*****由此可知，更改a元素的某些屬性必須進行聲明。
#強制繼承
a{
color:inherit;
}
#使用默認值
background-color: initial;
八、盒模型
box，盒子，每個元素都會在頁面中生成一個矩形區域
- 行盒：display屬性 = inline的元素
- 塊盒：display屬性 = block的元素
display默認值爲inline
瀏覽器自帶屬性將所有容器元素都設爲block
盒子的組成部分
- 內容 content （width、height，設置盒子內容的寬高）
- 填充 padding （
padding-left;padding-right;padding-top;padding-bottom;） - 邊框 border （邊框樣式+寬度+顏色）
- 外邊距 margin
h2{
color:red;
background-color: skyblue;
width: 100px;
height: 100px;
border-style:solid;
border-width: 10px;
border-color: #008c8c;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
盒模型的應用
1、改變寬高範圍（box-sizing）
默認情況下，width和height設置的是內容盒的寬高
在衡量設計稿尺寸的時候往往使用的是邊框盒
以前方法是精確計算
現在CSS3採用 box-sizing，用來影響width和height的影響範圍
#設置爲border-box後，width和height將成爲盒子整體的寬高
box-sizing: border-box;
2、改變背景覆蓋範圍（background-clip）
默認情況下，背景覆蓋邊框盒
可以使用background-clip改變背景的覆蓋範圍
3、溢出處理（overflow）
overflow，控制內容溢出邊框盒後的處理方式
overflow: hidden;
4、斷詞規則（word-break）
- normal：對於CJK字符（中日韓），在字符後面截斷，對於非CJK，在單詞後面截斷
- break-all：所有的都在字符處截斷
- keep-all：都在單詞截斷，中文沒有空格，無法使用
5、空白處理（white-space）
overflow: hidden;
white-space: normal;#不換行
text-overflow: ellipsis;
行盒盒模型
常見的行盒元素：span、strong、em、i、img、video、audio
特點
- 行盒跟着內容延伸
- 行盒不能設置寬高（要調整寬高，只能調整字體大小，字體類型，行高）
- 內邊距（填充區），在水平方向上有效，垂直方向只會影響背景，不會實際佔據空間
- 邊框和內邊距一樣
- 外邊距也一樣，都是左右有效，而上下無效，
- 結論：調整上下只能設置行高
行塊盒（指display屬性 = inline-block 的盒子）
- 不獨佔一行
- 盒模型中所有尺寸都有效
可替換元素 和 非可替換元素
非可替換元素：大部分元素，頁面上顯示的效果，取決於元素內容
可替換元素：少部分元素，頁面顯示結果取決於元素的屬性
可替換元素：img、video、audio
可替換元素類似於行塊盒
九、常規流
視覺格式化模型：頁面中的多個盒子的排列規則（佈局規則）
視覺格式化模型的三種方式
- 常規流
- 浮動
- 定位
常規流佈局（文檔流）
所有元素，默認情況下，都屬於常規流佈局，即沒有經過作者改動
- 總體規則：
- 塊盒獨佔一行
- 行盒依次排列
（包含塊–containning-block）：-----每個盒子都有自己的包含塊，包含塊決定了盒子的排列區域。
絕大部分情況下，每個盒子的包含塊爲其父元素的內容盒
塊盒規則1：水平方向上
- 每個塊盒的總寬度，必須剛好等於包含塊的寬度（即 margin、border、padding、content的總寬度 = 父元素內容盒的寬度）
- 寬度的默認值爲auto（將剩餘空間全部吸收）
- 若寬度、邊框、內邊距、外邊距計算後，仍然有剩餘空間，則該空間被margin-right全部吸收
- 在常規流中，塊盒在其包含塊中居中可以定寬，然後左右margin使用
margin:auto;
塊盒規則2：垂直方向上的auto值
- height:auto 適應內容的高度
- margin:auto 就是0
百分比取值
- padding、寬高、margin可以設置爲百分比
- 以上所有的百分比相對於包含塊的寬度（只有寬度爲標準值，高度不算）
- 高度的百分比設置：包含塊的高度是否取決於子元素的高度，設置百分比無效
- 若包含塊的高度不取決於子元素的高度，則百分比相對於父元素的高度
上下外邊距的合併
兩個常規流塊盒，上下外邊距相鄰，會進行合併（兩個外邊距取最大值）
- 同級相鄰的兩個div如此
- 父子元素上下外邊距相鄰，也會合並，注意是相鄰（即中間沒有隔開的東西，可以設置border隔開）
十、浮動
應用場景
- 文字環繞
- 橫向排列
浮動的基本特點
修改float屬性值爲：
- left，元素靠上靠左排列
- right，元素靠上靠右排列
- 默認值爲none
特點
- 當一個元素浮動後，它必定爲塊盒
- 浮動元素的包含塊和常規流一樣，是父元素的內容盒
盒子尺寸特點
- 寬度爲auto時，表示適應內容的寬度
- 高度爲auto時，和常規流一樣，同樣是適應內容的高度
- margin爲auto時，始終爲0
- 邊框、內邊距、百分比設置與常規流相同
浮動排列
- 左浮動的盒子靠上靠左排列
- 右浮動的盒子靠上靠右排列
- 浮動盒子在包含塊中排列時，會避開常規流盒子
- 常規流塊盒在排列時，無視浮動盒子
- 行盒在排列時，會避開浮動盒子（img float 文字環繞）
- 外邊距合併不會發生
問題（高度坍塌）
根源
因爲常規流盒子的自動高度是適應內容，在計算時不會考慮浮動盒子
即父常規流盒子認爲：常規流子元素是我親兒子，你要多大地兒，我就開闢多大地兒
浮動子元素不是我親兒子，我有地兒你可以用，我要是沒有，也懶得給你再開了
解決方案：使用clear屬性
- clear（清除浮動）
- 默認值爲none
- left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方（如果你有兄弟在天上飛，你不能無視他）
- right：該元素必須出現在前面所有右浮動盒子的下方
- both：所有
#修復方式
用一個隱身的常規流盒子放在所有的浮動盒子下方
clear：both；
理解：父盒子有一個親兒子，親兒子最小，但是親兒子注重兄弟情義（使用了clear：both），他不管親生不親生，要求自己的土地必須在所有兄弟的下面，因爲他是親兒子，父盒子必須讓他在自己的土地範圍內，沒有辦法，只好開闢大片土地。
十一、定位（手動控制元素在包含塊中的精準位置）
position屬性
- static：靜態、不定位
- relative：相對定位
- absolute：絕對定位
- fixed：固定定位
定位元素會脫離文檔流（相對定位除外）
一個脫離了文檔流的元素：文檔流中的元素擺放時，會忽略脫離了文檔流的元素
相對定位
不會導致元素脫離文檔流，只是讓元素在原來位置上偏移
可以通過四個屬性設置其相對偏移位置
- left
- right
- top
- bottom
相對定位，盒子不會影響其他盒子
絕對定位
包含塊變化：找祖先元素中第一個定位元素，該元素的填充盒爲其包含塊
絕對定位第一件事是要找爹，往上翻輩分，第一個有定位的元素就是爹，如果沒有，就是整個網頁
常用來一個元素蓋在另一個元素上面
固定定位
特點：和絕對定位的包含塊不一樣
固定定位的包含塊爲 視口
無論寫到哪個犄角旮旯，他爹永遠是視口
常用來 回到頂部 頂部的導航欄
定位體系下的居中
某個方向居中
- 定寬（高）
- 左右設置爲0
- margin設置爲auto
多個定位元素重疊時
堆疊上下文
使用z-index # 另一根座標系
z-index還可以設置爲負數，如果是負數，遇到常規流和浮動元素，它會被覆蓋