成都專業(yè)網(wǎng)站建設優(yōu)化團隊博為峰軟件測試培訓學費
文章目錄
- 前言
- 系列文章目錄
- 1 CSS的三大特性
- 1.1 層疊性
- 1.2 繼承性
- 1.3 優(yōu)先級（*）
- 2 盒子模型
- 2.1 看透網(wǎng)頁布局的本質
- 2.2 盒子模型（Box Model）的組成
- 2.3 邊框（border）
- 2.3.1 普通邊框
- 2.3.2 表格的細線邊框
- 2.3.3 邊框影響盒子的實際大小
- 2.4 內邊距（padding）
- 2.5 外邊距（margin）
- 2.5.1 普通外邊距
- 2.5.2 外邊距典型應用
- 2.5.3 外邊距合并
- 2.5.4 清除外邊距
- 3 圓角邊框（*）
- 4 盒子陰影（*）
- 5 文字陰影
- 6 浮動（float）
- 6.1 傳統(tǒng)網(wǎng)頁布局的三種方式
- 6.2 標準流（普通流/文檔流）
- 6.3 為什么需要浮動？
- 6.4 什么是浮動
- 6.5 浮動的特性（**）
- 6.6 浮動元素搭配標準流的父元素
- 6.7 常見的網(wǎng)頁布局
- 6.7.1 常見的三種網(wǎng)頁布局
- 6.7.2 浮動布局的注意事項（*）
- 6.8 清除浮動
- 6.8.1 為什么要清除浮動
- 6.8.2 清除浮動的本質
- 6.8.3 清除浮動的方法
- 總結
前言
這篇文章為我跟隨pink老師重新系統(tǒng)學習前端時做的一些筆記。
系列文章目錄
【前端學習】D1：HTML簡介與HTML標簽
【前端學習】D2-1：CSS入門
【前端學習】D2-2：CSS基礎
【前端學習】D3：CSS進階
【前端學習】D4：CSS提高
1 CSS的三大特性
1.1 層疊性
相同選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式?jīng)_突的問題。
層疊性原則：
- 樣式?jīng)_突，執(zhí)行最下面的樣式。
- 樣式不沖突，不會層疊。
1.2 繼承性
CSS中的繼承：子標簽會繼承父標簽的某些樣式，如文本顏色和字號。
- 恰當?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復雜性。
- 子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）。
行高的繼承：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行高的繼承</title><style>body {color: pink;/* font: 12px/24px 'Microsoft YaHei'; */font: 12px/1.5 'Microsoft YaHei';}div {/* 子元素繼承了父元素body的行高1.5 *//* 行高是當前元素文字大小font-size的1.5倍，即div的行高為21px*/font-size: 14px; }p {/* 當前的行高為1.5*16=24px*/font-size: 16px;}/* li沒有指定文字大小，則繼承父元素的文字大小12px，當前行高為12px*1.5-18px */</style></head><body><div>測試文字</div><p>測試文字</p><ul><li>測試文字。沒有指定文字大小</li></ul></body>
</html>
- 行高可以跟單位也可以不跟單位
- 如果子元素沒有設置行高，則會繼承父元素的行高1.5，此時子元素的行高是當前子元素的文字大小*1.5
- body行高1.5，這樣寫法的最大優(yōu)勢就是里面子元素可以根據(jù)自己文字大小自動調整行高
- 塊級元素獨占一行，塊元素寬度默認是容器（父元素）的100%。
1.3 優(yōu)先級（*）
當同一個元素指定多個選擇器，就會有優(yōu)先級的產生。
- 選擇器相同，則執(zhí)行層疊性。
- 選擇器不同，則根據(jù)選擇器權重執(zhí)行。
選擇器權重：
| 選擇器 | 選擇器權重 |
|---|---|
| 繼承 或者 * | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器，偽類選擇器 | 0,0,1,0 |
| id選擇器 | 0,1,0,0 |
| 行內樣式 style=“” | 1,0,0,0 |
| !important 重要的 | ∞ 無窮大 |
- 權重是由4組數(shù)字組成，但是不會有進位，可以理解為類選擇器永遠大于元素選擇器，id選擇器永遠大于類選擇器，以此類推。
- 等級判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值。
- 繼承的權重是0。如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0。
- 案例一：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>css權重注意點</title><style>/* 父親的權重是100 */#father {color: red!important;}/* p繼承的權重為0，所以p標簽的文字為粉色，而不為父元素的紅色 */p {color: pink;}body {color: red;}/* 瀏覽器默認指定了a鏈接的樣式：藍色文字且有下劃線，所以a鏈接不能直接繼承body的color */a {color: green;}</style></head><body><div id="father"><p>測試文字</p></div><a href="#">a標簽測試文字</a></body> </html>
權重疊加：如果是復合選擇器，則會有權重疊加，需要計算權重（沒有進位）。
/* .nav li的權重是0,0,0,1+0,0,1,0=0,0,1,1 */
.nav li {color: pink;
}
/* ul li的權重是0,0,0,1+0,0,0,1=0,0,0,2 */
ul li {color: green;
}
/* li的權重是0,0,0,1 */
li {color: red;
}
<ul class="nav"><li>測試文字</li>
</ul>
2 盒子模型
頁面布局的三大核心：盒子模型，浮動和定位。
2.1 看透網(wǎng)頁布局的本質
網(wǎng)頁布局過程：
- 先準備好相關的網(wǎng)頁元素，網(wǎng)頁元素基本都是盒子Box。
- 利用CSS設置好盒子樣式，然后擺放到相應位置。
- 往盒子里面裝內容。
網(wǎng)頁布局的本質：利用CSS擺盒子。
2.2 盒子模型（Box Model）的組成
所謂盒子模型，就是把HTML頁面中的額布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。
CSS盒子模型本質是一個盒子，封裝周圍的HTML元素，包括邊框、外邊距、內邊距和實際內容。
- border邊框
- content內容
- padding內邊距
- margin外邊距
2.3 邊框（border）
2.3.1 普通邊框
border可以設置元素的邊框。邊框有三部分組成：邊框寬度（粗細），邊框樣式，邊框顏色。邊框屬性的簡寫沒有先后順序。
border: border-width | | border-style | | border-color;
border-top: 5px solid red;
border-bottom: 1px dashed green;
| 屬性 | 作用 |
|---|---|
| border-width | 定義邊框粗細，單位是px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
案例：
/* 請給一個 200*200 的盒子，設置上邊框為紅色，其余邊框為藍色 */
div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; *//* border包含四條邊 */border: 1px solid blue;/* 利用層疊性*/border-top: 1px solid red;
}
2.3.2 表格的細線邊框
border-collapse屬性控制瀏覽器繪制表格中相鄰單元格的邊框。
border-collapse: collapse; /* 表示相鄰的單元格的邊框合并在一起 */
2.3.3 邊框影響盒子的實際大小
邊框會額外增加盒子的實際大小。解決方案：
- 測量盒子大小的時候，不量邊框。
- 測量盒子大小時包含邊框，則需要width / height減去邊框寬度。
2.4 內邊距（padding）
padding屬性用于設置內邊距，即邊框與內容之間的距離。
| 屬性 | 作用 |
|---|---|
| padding-top | 上內邊距 |
| padding-right | 右內邊距 |
| padding-bottom | 下內邊距 |
| padding-left | 左內邊距 |
padding屬性可以有一到四個值（實際開發(fā)中都會遇到）：
| 值的個數(shù) | 表達意思 |
|---|---|
| padding: 5px | 1個值，代表上下左右都有5像素內邊距。 |
| padding: 5px 10px | 2個值，代表上下內邊距為5像素，左右內邊距為10像素。 |
| padding: 5px 10px 20px | 3個值，上下內邊距為5像素，左內邊距為10像素，右內邊距為20像素。 |
| padding: 5px 10px 20px 30px | 4個值，上內邊距為5像素，右內邊距為10像素，下內邊距為20像素，左內邊距為30像素。順時針。 |
- 內容和邊框有了距離，添加了內邊距。
- padding影響盒子的實際大小。
也就是說，如果盒子已經(jīng)有了寬度和高度此時再指定內邊框，會撐大盒子。
解決方案：如果保證盒子跟效果圖大小保持一致，則讓width / height減去內邊距大小。
如果盒子本身沒有指定width / height屬性，則此時padding不會撐開盒子大小。
2.5 外邊距（margin）
2.5.1 普通外邊距
margin屬性用于設置外邊距，即控制盒子和盒子之間的距離。
| 屬性 | 作用 |
|---|---|
| margin-top | 上外邊距 |
| margin-right | 右外邊距 |
| margin-bottom | 下外邊距 |
| margin-left | 左外邊距 |
margin的簡寫方式與padding一致。
1.盒子與盒子之間有了距離，添加了外邊距。
2. margin不影響盒子的實際大小。
2.5.2 外邊距典型應用
- 塊級元素水平居中：外邊距可以讓塊級盒子水平居中，但必須滿足：
- 盒子必須指定了寬度（width）。
- 盒子左右的外邊距都設置為auto（自動）。
.header { width: 960px; margin: 0 auto; }- 常見的寫法：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
- 行內元素或行內塊元素水平居中
解決方案：給其父元素添加text-align: center;
2.5.3 外邊距合并
使用margin定義塊元素的垂直外邊距時，可能會出現(xiàn)外邊距的合并。
- 相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素（兄弟關系）相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直間距不是margin-bottom與margin-top的和。取兩個值中的較大者——這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。
解決方案：盡量只給一個盒子添加margin值。 - 嵌套塊元素垂直外邊距的塌陷
對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距，同時子元素也有上外邊距，此時父元素會塌陷較大較大的外邊距值。
解決方案：- 可以為父元素定義上邊框。
- 可以為父元素定義上內邊距。
- 可以為父元素添加overflow: hidden。
2.5.4 清除外邊距
網(wǎng)頁元素很多都帶有默認的內外邊距，而且不同瀏覽器默認的也不一致。因此我們在布局前，首先要清除下網(wǎng)頁元素的內外邊距。
* {padding: 0;margin: 0;
}
行內元素為了照顧兼容性，盡量只設置左右內外邊距，不要設置上下內外邊距?；蛘邔⑿袃仍剞D換為塊級和行內塊元素。
3 圓角邊框（*）
在CSS3中，新增了圓角邊框樣式。border-radius屬性用于設置元素的外邊框圓角。
border-radius: length;
- 參數(shù)值可以為數(shù)值（圓的半徑）或百分比的形式。
- 如果是正方形，想要設置為一個圓，把數(shù)值修改為高度或者寬度的一半即可，或者直接寫50%
- 如果是個矩形，設置為高度的一半即可。
- 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角（順時針）。
圓形頭像：
avatar {width: 30px;height: 30px;border-radius: 50%;
}
4 盒子陰影（*）
在CSS3中，新增了盒子陰影樣式。border-shadow屬性為盒子添加陰影。
border-shadow: h-shadow v-shadow blur spread color inset;
| 屬性值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置，允許負值。 |
| v-shadow | 必需。垂直陰影的位置，允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。 |
| inset | 可選。將外部陰影（outset）改為內部陰影。 |
- 默認是外陰影（outset），但是不可以寫這個單詞，否則導致陰影無效。
- 盒子陰影不占用空間，不會影響其他盒子排列。
5 文字陰影
在CSS3中，text-shadow屬性為文本添加陰影。
text-shadow: h-shadow v-shadow blur color;
| 屬性值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置，允許負值。 |
| v-shadow | 必需。垂直陰影的位置，允許負值。 |
| blur | 可選。模糊距離。 |
| color | 可選。陰影的顏色。 |
6 浮動（float）
6.1 傳統(tǒng)網(wǎng)頁布局的三種方式
- 普通流（標準流）
- 浮動
- 定位
實際開發(fā)中，一個頁面基本都包含了這三種布局方式。
6.2 標準流（普通流/文檔流）
標準流：標簽按照規(guī)定好的默認方式排列。是最基本的布局方式。
- 塊級元素會獨占一行，從上向下順序排列。
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內元素會按照順序，從左向右順序排列，碰到父元素邊緣則自動換行。
- 常用元素：spam、a、i、em等
6.3 為什么需要浮動？
浮動可以改變元素標簽默認的排列方式：
- 可以實現(xiàn)多個塊級盒子（div）水平排列成一行。（浮動的典型應用）
雖然轉換為行內塊元素可以實現(xiàn)一行顯示，但是行內塊之間會有大的空白縫隙，很難控制。 - 可以實現(xiàn)兩個盒子的左右對齊。
網(wǎng)頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
6.4 什么是浮動
float屬性用于創(chuàng)建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
選擇器 { float: 屬性值; }
| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動。默認值。 |
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
6.5 浮動的特性（**）
- 浮動元素會脫離標準流（脫標），移動到指定位置，浮動的盒子不再保留原先的位置。
- 多個浮動的元素會按照屬性值一行內顯示，并且頂部對齊排列。
- 浮動的元素會具有行內塊元素的特性。
如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據(jù)內容來決定。
6.6 浮動元素搭配標準流的父元素
為了約束浮動元素的位置，網(wǎng)頁布局一般采取的策略是：先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置。復合網(wǎng)頁布局的第一準則。
案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮動元素搭配標準流父盒子2</title><style>* { margin: 0; padding: 0; }li { list-style: none; }.box {width: 1226px;height: 285px;background-color: pink;margin: 0 auto;}.box li {width: 296px;height: 285px;background-color: purple;float: left;margin-right: 14px;}/* 這里必須寫 .box .last 要注意權重的問題 20 */.box .last {margin-right: 0;}</style></head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></body>
</html>
網(wǎng)頁布局第二準則：先設置盒子大小，之后設置盒子的位置。
當浮動元素的尺寸大于盒子元素，會溢出。但因浮動元素脫標，且其外邊距不會引起塌陷，所以不會撐大盒子。
6.7 常見的網(wǎng)頁布局
6.7.1 常見的三種網(wǎng)頁布局
通欄盒子（和瀏覽器一樣寬）不需要指定寬度。
6.7.2 浮動布局的注意事項（*）
- 浮動和標準流的父盒子搭配。
先用標準流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置。 - 如果一個元素浮動了，理論上其余的兄弟元素也要浮動，以防止引起覆蓋問題。
浮動的盒子只會影響浮動盒子后面的標準流，不會影響前面的標準流。- 當?shù)谝粋€盒子是標準流（獨占一行），第二個盒子左浮動，則第二個盒子會在下一行，不會蓋住第一個盒子。
- 當?shù)谝粋€盒子左浮動，第二個盒子是標準流（獨占一行），則第一個盒子會蓋住第二個盒子；若此時第三個盒子也浮動，則第三個盒子會在第二個盒子的下一行，第一個盒子的右側。
（↑好亂但是沒辦法）
6.8 清除浮動
6.8.1 為什么要清除浮動
理想狀態(tài)中，讓子盒子撐開父盒子，而不是指定父盒子的高度。但是浮動的子元素脫標不占位置，會使得父元素的高度為0，影響下方的標準流盒子。
6.8.2 清除浮動的本質
本質：清除浮動元素脫離標準流造成的影響。
如果父盒子本身有高度，則不需要清除浮動。
清除浮動之后，父級就會根據(jù)浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
選擇器 { clear: 屬性值; }
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both（實際開發(fā)中用） | 清除左右兩側浮動的影響 |
6.8.3 清除浮動的方法
清除浮動的策略：閉合浮動，即只讓浮動在父盒子內部影響，不影響父盒子外面的其他盒子。
- 額外標簽法，也稱隔離法，W3C推薦的做法。
- 額外標簽法會在浮動元素的末尾添加一個空的標簽（必須是塊級元素，不能是行內元素），例如<div style=“clear: both;”></div>或者其他標簽（<br />）。
- 優(yōu)點：通俗易懂，書寫方便。
- 缺點：添加許多無意義的標簽，結構化較差。
- 父級元素添加overflow屬性，將其屬性值設置為hidden、auto或scroll。
- 優(yōu)點：代碼簡潔。
- 缺點：無法顯示溢出的部分。
- 父級添加:after偽元素。
:after方式是額外標簽法的升級版。.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden; } .clearfix { /* IE6、7專有 */*zoom: 1; }- 優(yōu)點：沒有增加標簽，結構更簡單。
- 缺點：需要照顧低版本瀏覽器。
- 代表網(wǎng)站：百度、淘寶、網(wǎng)易等
- 父級添加雙偽元素。
.clearfix:before,.clearfix:after {content: "";display: table; } .clearfix:after {clear: both; } .clearfix {*zoom: 1; }- 優(yōu)點：代碼更簡潔。
- 缺點：需要照顧低版本瀏覽器。
- 代表網(wǎng)站：小米、騰訊等。
總結
- 布局為什么使用不同的盒子，而不只用<div>?
標簽都是有語義的，合理的地方用合理的標簽。比如產品標題就用<h>，大量文字段落就用<p>。 - 為什么用那么多類名？
給每個盒子使用一個類名，可以更好地找到盒子，選取盒子更容易，后期維護也方便。 - 什么時候用margin什么時候用padding？
大部分情況下兩者可以混用，各有優(yōu)缺點。但柑橘實際情況，總有更簡單的方法實現(xiàn)。 - 網(wǎng)頁布局準則：
- 多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
- 先設置盒子大小，之后設置盒子的位置。
原來盒子和浮動的使用有這么多講究。。