---

title: HTML與CSS學習記錄
toc: true
date: 2018-09-10 14:04:59

---

《HTML與CSS進階教程讀書筆記》

---

HTML基礎知識

HTML與XHTML

HTML指超文字標記語言，是構成網頁文件的主要語言。我們常說的HTML指HTML4.01。

XHTML指擴充套件的超文字標記語言，是XML風格的、更嚴格、更純淨的HTML。

兩者的主要區別：

• XHTML標籤必須閉合。
• XHTML標籤和屬性必須小寫。
• XHTML標籤屬性必須加引號。
• XHTML標籤用id屬性代替name屬性。

id和class

由於id屬性具有唯一性，因此W3C建議，對於頁面關鍵的結構或大結構，才能使用id屬性，其他地方使用class屬性。

因為搜尋引擎是根據標籤的語義和id屬性來識別的，因此id屬性的使用和命名都需要謹慎。

一般來說，定義多個class的目的在於：一個class抽取公共樣式，一個class定義單獨樣式。

標題欄小圖示

在head標籤內加入：

<link rel="shortcut icon" type="image/x-icon" href="圖示路徑.ico" />

其中rel和type是固定屬性不用更改，只需要修改圖片路徑即可。

語義化

HTML的精髓在於標籤的語義。搜尋引擎根據HTML程式碼識別頁面結構。

編寫語意結構良好的頁面的好處：

• 利於開發除錯和後期維護。
• 利於搜尋引擎優化。

應優先使用正確的語義化標籤，如果沒有語義化標籤可用，再考慮div或者span等無語義標籤。

標題語義化

h1-h6是標題標籤，相比於其他標籤，它們在搜尋引擎優化（SEO）中佔有相當重要的地位。

一般用到h4，h5和h6權重和普通標籤差不多，很少使用。

對於標題語義化，我們需要注意的是：

• 一個頁面只能有一個h1標籤。
• h1-h6之間不要出現斷層。
• 不要用標題標籤來定義樣式（如為了加粗字型而為文字加上標題標籤）。
• 不要用div來代替標題標籤。

div是無語義的標籤，如果使用div代替標題標籤會使網頁在SEO中丟失大量權重。

圖片語義化

alt屬性和title屬性

alt是給搜尋引擎看的，title是給使用者看的。

搜尋引擎根據alt屬性或上下文判斷圖片內容。

因此img標籤必須新增alt屬性。

figure元素和figcaption元素

對於圖片+圖注的效果，使用figure和figcaption來增強圖片語義化。

例：

<figure>
    <img src="xxx" alt="xxx" />
    <figcaption>這是一個圖注</figcaption>
</figure>

更詳細的介紹可以看這一篇部落格。

表格語義化

標籤	說明
table	表格
caption	標題
thead	表頭（語義劃分）
tbody	表身（語義劃分）
tfoot	表尾（語義劃分）
tr	行
th	表頭單元格
td	表格單元格

表單語義化

label標籤

label標籤的for屬性有兩個作用：

• 語義上綁定了label元素和表單元素。（<label for="element_id">）
• 當我們點選label中的文字時，其關聯的表單元素也會獲得焦點。

例：

<input id="rdo" name="rdo" type="radio" /><label for="rdo">單選框</label>

fieldset標籤和legend標籤

fieldset標籤用於給表單元素進行分組並繪製一個邊框，legend標籤用於定義某一組表單的標題。

例如這個例子：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

作用：

• 增強表單語義。
• 可以使用fieldset標籤的disabled屬性來禁用整個組中的表單元素。

其他語義化

換行符<br />

W3C標準規定，<br />標籤只能用於段落中的換行。即只能用於p標籤內部。

無序列表ul

對於列表型資料，不建議使用div實現，而應用無序列表或有序列表實現。

為了實現外觀效果，一般使用無序列表而不是有序列表。

strong 標籤和em標籤

W3C對這兩個標籤賦予了“強調”的語義。

可以在CSS中重新定義它們的樣式而不會改變它們的語義。

del標籤和ins標籤

這兩個標籤一般是配合使用表示更新文字：“delete”和“insert”，被刪除的文字和被更新的文字。

一般會用CSS重新定義它們的樣式。

例項連結

img標籤

對於什麼時候使用img標籤，什麼時候使用背景圖片，應該根據HTML的語義來判斷。

• img標籤：作為HTML的一部分，希望被搜尋引擎識別。

• 背景圖片： 只起到修飾作用，不希望被搜尋引擎識別。

語義化驗證

通過去掉CSS樣式，觀察頁面是否還有很好的可讀性來判斷一個頁面是否語義良好。

HTML5捨棄的標籤

下邊這些已經被捨棄的標籤(僅為了定義樣式的標籤和很少使用或已經被新標籤代替的標籤)應停止使用：

• <acronym> 定義首字母縮寫，應用abbr代替。
• <applet> 定義嵌入的applet，應用object代替。
• <basefont>
• <big>
• <center>
• <dir> 定義目錄列表，應用ul代替。
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

CSS基礎知識

CSS單位

px

pixel，畫素，一個圖片或計算機螢幕中最小的點。

百分比%

CSS中支援百分比的屬性：

• width、height、font-size，它們的百分比是相對於父元素的“相同元素”的值來計算的。
• line-height，它的百分比是相對於父元素的font-size值來計算的。
• vertical-align，它的百分比是相對於當前元素繼承的line-height值來計算的。

em

1em等於當前元素的以px為單位的font-size值，

若當前元素的font-size值沒有定義，則從父元素繼承，

若當前元素的所有祖先元素都沒有定義font-size，則繼承瀏覽器預設的font-size值：16px。

使用em的小技巧：首行縮排使用 text-indent: 2em實現。

rem

CSS3新引入的單位，指相對根元素（即html元素）的字型大小。

CSS特性

繼承性

指子元素繼承了父元素的某些樣式屬性。

在CSS中，具有繼承性的樣式有三大類：

• 文字相關屬性： font--family，font-size，font-style，font-weight，font，line-height，text-align，text-indent，word-spacing。
• 列表相關屬性： list-style-image，list-style-position，list-style-type，list-style。
• 顏色相關屬性： color。

層疊性

“後者居上”原則。

CSS的層疊性指樣式的覆蓋。對於具有相同權重的相同屬性，以最後定義的值為準。

CSS優先順序

引用方式

行內樣式>(內部樣式=外部樣式)

若同時存在權重相同內部樣式和外部樣式，則以最後引入的樣式為準。

繼承方式

以最近的祖先元素為準。

指定樣式

常見的偽元素——:before、:after、:first-letter、:first-line。

常見的偽類——:hover、:first-child等。

常用的選擇器優先順序：行內樣式>id選擇器>class選擇器>元素選擇器。

選擇器權值表：

選擇器	權值
萬用字元	0
偽元素	1
元素選擇器	1
class選擇器	10
偽類	10
屬性選擇器	10
id選擇器	100
行內樣式	1000

繼承樣式和和指定樣式

指定樣式權重更高。

!important

權值最高，不推薦使用。

CSS引入方式

• 匯入樣式表（載入html後加載css，不推薦）
• 外部樣式表（link標籤）
• 內部樣式表（style標籤）
• 行內樣式表

CSS選擇器

CSS出去基本的選擇器（元素選擇器、id選擇器、class選擇器、群組或分組選擇器），

還有層次選擇器：

選擇器	說明
M N	後代選擇器，選擇M元素所有內部後代N元素
M>N	子代選擇器，選擇M元素所有內部子代N元素
M~N	兄弟選擇器，選擇M元素所有同級N元素
M+N	相鄰選擇器，選擇M元素相鄰的下一個同級元素

CSS規範

命名規範

CSS檔案命名

開發階段按照功能模組劃分CSS檔案。

檔名	說明
reset.css	重置樣式，重置元素預設樣式
global.css	全域性樣式，全站公用，定義頁面基礎樣式
themes.css	主題樣式，用於實現換膚功能
module.css	模組樣式，用於模組的樣式
master.css	母版樣式，用於母版頁的樣式
columes.css	專欄樣式，用於專欄的樣式
forms.css	表單樣式，用於表單的樣式
mend.css	補丁樣式，用於維護、修改的樣式
print.css	列印樣式，用於列印的樣式

id和class命名

建議使用中劃線命名，例如column-title。

為了避免class命名的重複，一般取父元素的class名作為字首，例如column-title。

網頁主體部分	命名
最外層	wrapper(一般用於包裹整個頁面)
頭部	header
內容	content
側欄	sidebar
欄目	column
熱點	hot
新聞	news
下載	download
標誌	logo
導航條	nav
主體	main
左側	main-left
右側	main-right
底部	footer
友情連結	friendlink
加入我們	joinus
版權	copyright
服務	service
登入	login
註冊	register

導航部分	命名
主導航	main-nav
子導航	sub-nav
邊導航	side-nav
左導航	leftside-nav
右導航	rightside-nav
頂導航	top-nav

選單部分	命名
選單	menu
子選單	submenu

其他	命名
標題	title
摘要	summary
登入條	loginbar
搜尋	search
標籤頁	tab
廣告	banner
小技巧	tips
圖示	icon
法律宣告	siteinfolegal
網站地圖	sitemap
工具條	tool、toolbar
首頁	homepage
子頁	subpage
合作伙伴	partner
幫助	help
指南	guide
滾動	scroll
提示資訊	msg
投票	vote
相關文章	related
文章列表	list

書寫規範

對於功能程式碼，應該集中放在一起，

對於其他程式碼，應按照如下順序：

1. 影響文件流屬性（佈局屬性）——display，position，float，clear等
2. 自身盒模型屬性——width，height，padding，margin，border，overflow等
3. 文字性屬性——font，line-height，text-align，text-indent，vertical-align等
4. 裝飾性屬性——color，background-color，opacity等
5. 其他屬性——cursor，content，list-style，quotes等

例如：

#main {
  /* 影響文件流屬性 */
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  /* 盒子模型屬性 */
  width: 100px;
  height: 100px;
  border: 2px solid gray;
  /* 文字性屬性 */
  font-size: 15px;
  font-weight: bold;
  text-indent: 2em;
  /* 裝飾性屬性 */
  color: white;
  background-color: red;
  /* 其他屬性 */
  cursor: pointer;
}

註釋規範

由於壓縮工具會刪除所有的註釋，因此有時為了保留版權宣告等註釋資訊，需要在註釋內容前加一個歎號，如/*! 註釋內容 */，這樣壓縮工具就不會刪除這條註釋資訊。

頂部註釋

/*
 *@description:說明
 *@author:作者
 *@update:更新時間，如2018-09-10 17:42
 */

模組註釋

/* 導航部分，開始 */
......
/* 導航部分，結束 */

簡單註釋

/* 單行註釋 */

或者

/*多行註釋
 *多行註釋
 *多行註釋
 */

CSS reset

重置樣式，去除元素在瀏覽器中的預設樣式。

是否使用CSS reset根據實際開發需求而定。

盒子模型

外邊距疊加

又稱為“margin疊加”，指當兩個外邊距相遇時會“合二為一”。疊加後的外邊距為兩個外邊距的最大值。

只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

以下圖片均來自w3school

負margin

• 當margin-top或者margin-left為負數時，當前元素會被拉向指定方向。
• 當margin-bottom或者margin-right為負數時，後續元素會被拉向指定方向。

這裡有一篇文章講得不錯，可以參考一下。

聖盃佈局、雙飛翼佈局就是利用這個實現的。

overflow

當浮動引起父元素高度塌陷時，可以為父元素加上overflow: hidden來清除浮動。

display屬性

屬性值	說明
inline	行內元素
block	塊元素
inline-block	行內塊元素
table	以表格形式顯示，類似於table元素
table-row	以表格行形式顯示，類似於tr元素
table-cell	以表格單元格形式顯示，類似於td元素
none	隱藏元素

塊元素

• 獨佔一行
• 內部可以容納其他塊元素或行元素
• 可以定義width和height
• 可以定義四個方向的margin

inline元素

• 可以與其他行內元素位於同一行
• 可以容納行內元素，但不能容納塊元素
• 無法定義width和height
• 可以定義margin-left和margin-right，不能定義margin-top和margin-bottom

inline-block元素

• 可以定義width和height
• 可以與其他行內元素位於同一行

常見的inline-block元素：img元素和input元素

display: table-cell

可以用於實現：

• 圖片垂直居中於元素
• 等高佈局
• 自動平均劃分元素，並在同一行顯示

去除inline-block元素間距

在父元素中新增font-size: 0

文字效果

文字屬性	說明
text-decoration	下劃線、刪除線、頂劃線
text-transform	文字大小寫
font-variant	將英文文字轉換為小型大寫字母
text-indent	段落首行縮排
text-align	文字水平對齊
vertical-align	文字垂直對齊
line-height	行高
letter-spacing	字距
word-spacing	詞距

text-indent

可以使用 text-indent: -9999px;來隱藏文字。

text-align

主要使用的值為left、right、center，對文字、inline元素、inline-block元素都起作用，對塊元素不起作用。

利用margin: 0 auto實現塊元素的水平居中。

text-align: center在父元素中定義，margin: 0 auto在當前元素中定義。

line-height

關於頂線、中線、基線、底線可以自行查閱。

行高（line-height）指的是兩行基線之間的距離。

• 將height和line-height設為相同值可以實現文字垂直居中。
• 當取值為%或者em時，是相對與父元素的font-size計算的。
• 當取值為無單位數字時，是相對於當前元素的font-size計算的。

vertical-align

vertical-align對inline、inline-block、table-cell元素有效，對塊元素無效。

用於定義周圍的文字、inline元素、inline-block元素相對於該元素基線的垂直對齊方式。

可以取負長度值和百分比值。

取值

1. 負值 ： vertical-align: -2px指的是該元素相對於基線向下偏移2px；

2. 百分比 ： 相對於當前元素繼承的line-height值計算的，也是該元素相對於基線偏移的值；

3. 關鍵字 （前四個比較常用）：

值	描述
top	把元素的頂端與行中最高元素的頂端對齊
middle	把此元素放置在父元素的中部。
baseline	預設。元素放置在父元素的基線上。
bottom	把元素的底端與行中最低的元素的頂端對齊。
text-top	把元素的頂端與父元素字型的頂端對齊
text-bottom	把元素的底端與父元素字型的底端對齊。
sub	垂直對齊文字的下標。
super	垂直對齊文字的上標
inherit	規定應該從父元素繼承 vertical-align 屬性的值。

應用

• 為img新增vertical-align: middle可以實現圖片與周圍的文字居中對齊
• 要使塊元素（如div）也可以使用此屬性，可以為其先定義display: table-cell

表單效果

radio與checkbox

預設情況下由於是基線對齊因此視覺上會感覺單選框或複選框旁邊的文字比它們低，這個時候可以使用vertical-align來讓他們垂直居中對齊。

可以使用關鍵字，也可以使用數值。

textarea

• 可以使用max-width和max-height來限制拖拽大小
• 可以使用resize: none來禁止拖拽

要使textarea在不同瀏覽器中具有相同的外觀，可以：

• 使用CSS的width和height定義大小
• 使用overflow: auto來定義textarea滾動條自適應

表單對齊

書上給了註冊的例子：

實現方法：

1. 每一行表單分為左欄加若干右欄
   1. 所有行的左欄長度相等
   2. 所有行的右欄所有盒子長度之和相等
   3. 左欄一般為一個label，右欄為若干文字框
2. 所有左欄和右欄盒子都設為左浮動
3. 左欄新增屬性text-align: right使得文字右對齊
4. 每一行左欄盒子長度加上所有右欄盒子長度之和等於行寬
5. 每一行由一個p包裹住，併為p新增overflow: hidden來清除浮動

然後我又去看了一下各網站的登入介面，基本上是一個icon+一個input的模式：

實現方法：

• icon使用position: absolute脫離文件流並蓋在input上
• input將padding-left調到合適大小使得輸入框不被icon蓋住

浮動佈局

文件流

簡單來說就是元素在頁面中出現的先後順序。

• 正常文件流 ： “normal flow”，指預設情況下頁面元素的佈局情況。
• 脫離文件流：脫離正常文件流。要改變正常文件流，使用浮動和定位方法。

浮動

可以使元素移到左邊或者右邊，並且允許後邊的文字和元素環繞著它。

浮動後使用margin來定義和其他元素之間的間距。

絕對定位的元素忽略float屬性。

float的取值表如下，預設為none：

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	預設值。元素不浮動，並會顯示在其在文字中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

• 當一個元素新增float屬性為left或者right時，它將變為block型別。
• 浮動元素脫離正常文件流，若其height大於父元素的height或者父元素的height未定義，會造成父元素高度塌陷。可以為父元素新增overflow: hidden來解決。

• 若父元素和子元素都是浮動元素，則父元素會自適應地包含子元素。

• 若兄弟元素不是浮動元素，由於浮動元素脫離文件流，可能會出現覆蓋等情況。

清除浮動

• clear: both，用於浮動元素後邊的元素，表示兩邊不允許出現浮動元素。
• overflow: hidden，用於浮動元素的父元素，但會隱藏超出父元素的內容部分。
• 實際開發中，更經常使用:after偽元素結合clear: both來實現。
• 為了相容ie，為父元素新增zoom: 1來消除浮動。

定位佈局

屬性值

值	描述
static	預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成固定定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。
sticky	粘性定位，該定位基於使用者滾動的位置。它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支援 sticky 定位。 Safari 需要使用 -webkit- prefix (檢視以下例項)。
inherit	規定應該從父元素繼承 position 屬性的值。
initial	設定該屬性為預設值，詳情檢視 CSS initial 關鍵字。

• absolute會將元素轉換為塊元素。
• 若想要子元素相對於父元素定位，一般給父元素新增position: relative，給子元素定義position: absolute來實現。祖先元素同理。

z-index屬性

預設情況下設定z-index無效，只有當元素定義position為relative、absolute、fixed時才會啟用，z-index值越大，其堆疊順序越高，越靠上（z方向上的靠上）。

CSS圖形

由於圖片大小比較大，資料傳輸量大且一張圖片會引發一次HTTP請求，因此對徐圖形效果，一般更傾向於用CSS實現。

這裡有一篇CSS製作圖形速查表總結得比較全面，可以參考。

另外對於帶有邊框的圖形，一般是用大小不同的兩個相同圖形實現，小的覆蓋在大的上邊。

效能優化

屬性縮寫

• border：border: 1px solid red
  • 若不想要底邊框，可以加上border-bottom: 0
  • 若只想要底邊框，可以border-bottom: 1px solid red
• padding：
  • padding: 10px指上右下左均為10px
  • padding: 10px 20px指上下為10px，左右為20px
  • padding: 10px 20px 30px 40px的順序為上右下左，從上開始按照順時針順序
• margin： 類似於padding
• background： background: url('xxx.jpg') no-repeat 80px 40px,最後為background-position
• font： font: "微軟雅黑" 12px/1.5em bold
  • 順序為font-family、font-size、line-height、font-weight
  • 簡寫形式必須指定font-family和font-size的值，其他屬性沒有指定則為預設值
  • 簡寫形式中font-size和line-height之間需要加入一個斜槓/
• color： 十六進位制的顏色值若每兩位值相同，可以縮寫一半，比如color: #112233可以縮寫為color: #123

語法壓縮

• 當一個CSS規則只有一兩個屬性的時候，使用橫向書寫
• 可以省略最後一個屬性的分號
• background-image、cursor等屬性url()中的路徑不用加引號
• 如果某一個屬性值為0，則不需要加單位
• 如果某一個屬性值是以0為開頭的小數，可以吧0省略
• 使用群組選擇器合併相同樣式
• 若同一個父元素的多個子元素都定義了相同的可繼承屬性，把這些屬性定義在父元素中來精簡程式碼

CSS壓縮

書中推薦了兩個線上的壓縮工具：CSS Compressor 和 YUI Compressor

以YUI Compressor為例，它會對CSS檔案執行如下操作：

• 刪除所有註釋
• 刪除無用空白符
• 刪除結尾分號
• 刪除屬性值為0的單位
• 刪除以0開頭的小數前的0
• 合併相似屬性（屬性縮寫）
• 將RGB顏色轉換為十六進位制顏色

圖片壓縮

書中推薦的圖片壓縮工具：

線上的JPEGmini和TinyPNG以及本地的ImageOptim

高效能的選擇器

瀏覽器對選擇器規則是從右到左進行解析的。

CSS選擇的匹配效率：

1. id選擇器
2. class選擇器
3. 元素選擇器
4. 相鄰選擇器
5. 子選擇器
6. 後代選擇器
7. 萬用字元選擇器
8. 屬性選擇器
9. 偽類選擇器

因此在使用選擇器時應注意：

• 儘量不要使用萬用字元
• 不要在id選擇器和class選擇器前新增元素名
• 選擇器最好不要超過三層，靠右的選擇條件應儘可能精確
• 避免使用後代選擇器，儘量少使用子選擇器

CSS技巧

水平居中

• 文字、inline元素和inline-*元素： text-align: center
• 塊元素： margin: 0 auto

垂直居中

• 行內塊元素使用vertical-align: middle
• 塊元素將display改為table-cell然後使用vertical-align
• 多行文字使用一個標籤將文字包起來並設為table-cell，然後再設定vertical-align
• 單行文字設定line-height和height屬性值相同來實現

CSS Sprite

又稱為CSS精靈或CSS雪碧圖，它將零散的小背景圖合併成一張大背景圖，然後再利用background-position屬性進行定位從而現實小背景圖。

使用CSS Sprite技術時，需要注意：

• 在開發後期而不是開發前期使用此技術
• 有條理地組織圖片順序，應將小背景圖按照類別、風格、大小等分門別類地放好
• 控制雪碧圖的大小，當圖片大小小於200KB時傳輸時間是差不多的，因此雪碧圖應控制在200KB以內

書中推薦了兩個CSS Sprite工具：CSS Sprite Generator 和 Sprite Cow

Icon Font圖示

使用字型檔案實現小圖示效果，從而減少圖片的使用。

推薦的Icon Font網站：http://www.iconfont.cn/

網站上就有使用教程

重要概念

包含塊

containing block，決定一個元素大小和定位的元素。

時視覺格式化模型中的一個重要概念，與CSS盒子模型類似。其作用主要是為其內部的後代元素提供一個參考。

• 根元素（HTML元素）沒有父元素，它存在的包含塊被稱為初始包含塊
• 定位為fixed的元素的包含塊為瀏覽器視窗
• 定位為是static和relative的元素的包含塊是它最近的塊級（block、inline-block或table-cell）祖先元素建立的
• 定位為absolute的元素的包含塊是它最近的定位不是static的祖先元素，可以是塊元素也可以是行內元素

層疊上下文

一個元素在z軸上的堆疊順序：

• 層疊級別越大越靠上
• 同等層疊級別，後邊的堆疊在前邊的上邊（後來者居上）
• 不同的層疊上下文比較的是父級層疊上下文，與自身無關

BFC和IFC

BFC： block formatting context， 塊級格式上下文

IFC： inline formatting context， 行級格式上下文

若一個元素具備以下任何一個條件，則會創造創造一個新的BFC：

• 根元素
• float屬性不是none
• position屬性是absolute或fixed
• overflow屬性值不是visible
• display屬性為inline-block、table-caption、table-cell

W3C描述BFC的特點為：

• 在一個BFC中，盒子從頂端開始垂直一個接著一個地排列。兩個相鄰盒子之間的垂直間距有margin決定。同一個BFC中，兩個相鄰塊盒子之間垂直方向上的外邊距會疊加。
• 在一個BFC中，每一個盒子的左外邊界（margin-left）會緊貼著容器的border-left，右邊同理，即使存在浮動元素也是如此。

可以得到結論：

1. 在一個BFC內部，盒子會在垂直方向上一個接著一個地排列
2. 在一個BFC內部，相鄰的margin-top、margin-bottom會疊加
3. 在一個BFC內部，每一個盒子的左外邊界（margin-left）會緊貼著容器（包含盒子）的border-left，即使存在浮動元素也是如此
4. 在一個BFC內部，如果存在內部元素是一個新的BFC，並且存在內部元素是浮動元素，則這個新的BFC的區域不會與浮動元素的區域重疊
5. BFC就是頁面上一個隔離的盒子，該盒子內部的子元素不會影響到外邊的元素
6. 計算一個BFC的高度時，其內部浮動元素的高度也會計算其中

BFC的用途：

• 建立BFC來避免垂直外邊距疊加（例如使用div將一個盒子包起來並給這個div新增overflow屬性）
• 建立BFC來清除浮動（為父元素新增overflow: hidden，利用結論第六條）
• 建立BFC來實現自適應佈局

---

好了到這裡，這本書就看完了，一些細節的東西瞭解到了很多，下面開始看html5+css3。

- 2018 - 09 - 11 -