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