兩篇文章我們把「Web前端開發(fā)進(jìn)階篇」CSS樣式講解完了，接著我們來講解下一篇文章，關(guān)于CSS框模型的內(nèi)容知識(shí)，小伙伴們跟上我的節(jié)奏，動(dòng)起來，Let's go！

【引言】

CSS框模型（也就是常說的盒子模型）就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。css中的框模型是css的基礎(chǔ)，框模型的理解可以幫助我們很好的掌握頁面中的布局，進(jìn)行對(duì)樣式進(jìn)行修改。話不多說，那就開始吧。

CSS 框模型概述

CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。

從上圖看出，元素框最內(nèi)部分的是實(shí)際的內(nèi)容，其次往外圍的是內(nèi)邊距（padding），內(nèi)邊距呈現(xiàn)了元素的背景，內(nèi)邊距的邊緣是邊框（border），默認(rèn)是透明的邊框，不會(huì)遮擋任何元素，最外面的是外邊距（margin）。

提示：背景應(yīng)用于內(nèi)容的內(nèi)邊距、邊框組成的區(qū)域。

內(nèi)邊距、邊框和外邊距默認(rèn)都是為0，但是有些瀏覽器它們有自己默認(rèn)的外邊距和內(nèi)邊距，可以通過將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。例如，用通用選擇器對(duì)所有元素進(jìn)行設(shè)置。

* {margin: 0;padding: 0;}

在CSS中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖：

CSS就可以這樣寫：

#box {
 width: 70px;
 margin: 10px;
 padding: 5px;
}

提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊。

提示：外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。

瀏覽器兼容性

一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD（文檔類型定義），大多數(shù)瀏覽器都會(huì)按照上面的圖示來呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

雖然有方法解決這個(gè)問題。但是目前最好的解決方案是回避這個(gè)問題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

【在CSS中，我們把padding和margin統(tǒng)稱為內(nèi)邊距和外邊距，邊框（border）內(nèi)的是內(nèi)邊距，邊框外的就是外邊距，好記吧。哈哈】

CSS內(nèi)邊距（padding）

元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。CSSpadding 屬性定義元素邊框與元素之間的空白區(qū)域。padding屬性接受長(zhǎng)度值或百分比值，但不允許負(fù)值，例如，給div元素的各邊添加10px的內(nèi)邊距，你只需要這樣寫：

#box
{padding: 10px;}

你也可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位，例如：

#box{padding: 10px 20em 2ex 20%;}

單邊內(nèi)邊距屬性

可以通過下面四個(gè)屬性，分別設(shè)置各邊的內(nèi)邊距：

• padding-top
• padding-right
• padding-bottom
• padding-left

例如：

#box {
 padding-top: 10px;
 padding-right: 0.25em;
 padding-bottom: 2ex;
 padding-left: 20%;
 }

CSS邊框

邊框在CSS是最常用的屬性，可以用它創(chuàng)建出效果出色的邊框，并且可以應(yīng)用于任何元素。也就是我們常用的border，元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

每個(gè)邊框有 3 個(gè)方面：寬度、樣式，以及顏色。

1、邊框的樣式

上節(jié)課我們講解了CSS輪廓（outline-style），但是由于瀏覽器兼容性，用的較少，我們可以用邊框定義多個(gè)樣式，例如：

.p1 {border-style: solid;}
.p2 {border-style: dotted}
.p3 {border-style: dashed}
.p4 {border-style: solid}
.p5 {border-style: double}
.p6 {border-style: groove}
.p7 {border-style: ridge}
.p8 {border-style: inset}
.p9 {border-style: outset}

效果：

定義單邊樣式，例如：

.p1 {
				border-top-style: solid;
				border-right-style: dotted;
				border-bottom-style: double;
				border-left-style: groove
			}

效果：

2、邊框的寬度

可以通過 border-width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：可以指定長(zhǎng)度值，比如 2px 或 0.1em；或者使用 3 個(gè)關(guān)鍵字之一，它們分別是 thin 、medium（默認(rèn)值） 和 thick。

注釋：CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶代理則分別設(shè)置為 3px、2px 和 1px。

所以，我們可以這樣設(shè)置邊框的寬度：

p {border-style: solid; border-width: 5px;}

或者：

p {
 	border-style: solid; 
 	border-width: thick;
}

定義單邊寬度

可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框：

p {
 	border-style: solid; 
 	border-width: 15px 5px 15px 5px;
}

也可以通過下列屬性分別設(shè)置邊框各邊的寬度：

p {
 	border-style: solid;
 	border-top-width: 15px;
 	border-right-width: 5px;
 	border-bottom-width: 15px;
 	border-left-width: 5px;
 }

沒有邊框

由于 border-style 的默認(rèn)值是 none，如果沒有聲明樣式，就相當(dāng)于 border-style: none。因此，如果想要邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式。僅有寬度，顏色是不起任何作用的。

3、邊框的顏色

使用一個(gè)簡(jiǎn)單的 border-color 屬性，它一次可以接受最多 4 個(gè)顏色值。也是上、右、下、左。可以用十六進(jìn)制或RGB來表示顏色，單邊邊框顏色與單邊樣式和單邊寬度屬性相同。例如：

.p1 {
				border-top-color: red;
				border-right-color: blue;
				border-bottom-color: royalblue;
				border-left-color: hotpink;
			}

透明邊框：如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個(gè)不可見的邊框。你就可以這樣：

border-color: transparent;

CSS 外邊距

圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。

設(shè)置外邊距的最簡(jiǎn)單的方法就是使用 margin 屬性，這個(gè)屬性接受任何長(zhǎng)度單位、百分?jǐn)?shù)值甚至負(fù)值。

與內(nèi)邊距的設(shè)置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時(shí)針旋轉(zhuǎn)的：

h1 {margin : 10px 0px 15px 5px;}

值復(fù)制：

在前兩節(jié)中提到過值復(fù)制。下面我們?yōu)槟v解如何使用值復(fù)制。

有時(shí)，我們會(huì)輸入一些重復(fù)的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復(fù)制，您可以不必重復(fù)地鍵入這對(duì)數(shù)字。上面的規(guī)則與下面的規(guī)則是等價(jià)的：

p {margin: 0.5em 1em;}

這兩個(gè)值可以取代前面 4 個(gè)值。這是如何做到的呢？CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個(gè)值。規(guī)則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值。
• 如果缺少下外邊距的值，則使用上外邊距的值。
• 如果缺少右外邊距的值，則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點(diǎn)：

換句話說，如果為外邊距指定了 3 個(gè)值，則第 4 個(gè)值（即左外邊距）會(huì)從第 2 個(gè)值（右外邊距）復(fù)制得到。如果給定了兩個(gè)值，第 4 個(gè)值會(huì)從第 2 個(gè)值復(fù)制得到，第 3 個(gè)值（下外邊距）會(huì)從第 1 個(gè)值（上外邊距）復(fù)制得到。最后一個(gè)情況，如果只給定一個(gè)值，那么其他 3 個(gè)外邊距都由這個(gè)值（上外邊距）復(fù)制得到。

h1 {margin: 0.25em 1em 0.5em;}	/* 等價(jià)于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等價(jià)于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等價(jià)于 1px 1px 1px 1px */

這種辦法有一個(gè)小缺點(diǎn)，您最后肯定會(huì)遇到這個(gè)問題。假設(shè)希望把 p 元素的上外邊距和左外邊距設(shè)置為 20 像素，下外邊距和右外邊距設(shè)置為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

單邊外邊距屬性

單邊外邊距屬性跟單邊邊框顏色與單邊樣式和單邊寬度屬性相同，都是從四個(gè)方向設(shè)置單邊外邊距值。

h2 {
 margin-top: 20px;
 margin-right: 30px;
 margin-bottom: 30px;
 margin-left: 20px;
 }

提示：

Netscape 和 IE 對(duì) body 標(biāo)簽定義的默認(rèn)邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內(nèi)部填充（padding）的默認(rèn)值定義為 8px，因此如果希望對(duì)整個(gè)網(wǎng)站的邊緣部分進(jìn)行調(diào)整，并將之正確顯示于 Opera 中，那么必須對(duì) body 的 padding 進(jìn)行自定義。

外邊距合并

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。

合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

也很簡(jiǎn)單，看張圖就明白了：

當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：

這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄?，形成了一個(gè)小的外邊距。

外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

CSS框模型今天就講解到這里了，下一篇講解CSS定位，希望大家不要放棄學(xué)習(xí)哦！

PS：

本文為‘Web前端進(jìn)階指南’原創(chuàng)，手動(dòng)碼字不易，小伙伴們別忘了順手點(diǎn)個(gè)贊加個(gè)關(guān)注哈，有什么不懂的下方留言評(píng)論或私信。謝謝大家哈！

、文本格式化標(biāo)簽

在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。

b i s u 只有使用 沒有 強(qiáng)調(diào)的意思 , strong em del ins 語義更強(qiáng)烈

二、注釋標(biāo)簽

HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。

• 語法

<!-- 注釋語句 -->

• 注意
• 注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會(huì)被下載到用戶的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。

是一款輕量級(jí)且非常好用的ide，我平時(shí)用idea開發(fā)java，但是開發(fā)vue，go和net core會(huì)選擇用vscode，因?yàn)樗膬?nèi)存占用要比idea小很多，下面羅列了些快速使用vscode的信息，方便更換電腦時(shí)可以快速啟用它，涉及常用快捷鍵，個(gè)性化配置，適用于各種語言開發(fā)的插件。

（下載，常用快捷鍵，個(gè)性化配置，通用插件，前端插件，java開發(fā)插件，go開發(fā)插件，c#開發(fā)插件）

下載

https://code.visualstudio.com/Download

常用快捷鍵

打開命令面板（F1）

快速打開（ctrl + P）

注釋行（ctrl + /）

全局搜索（ctrl + shift + F）

清除全部沒用的import（alt + shift + o）

更多快捷鍵：https://code.visualstudio.com/docs/getstarted/keybindings

個(gè)性化配置

設(shè)為雙擊打開文件

設(shè)置里搜索“open mode”，把下拉選項(xiàng)改成doubleClick

取消點(diǎn)擊預(yù)覽功能

設(shè)置里搜索“preview”，點(diǎn)擊工作臺(tái)，把第一個(gè)打勾框的勾去掉

自動(dòng)保存

設(shè)置里搜索“auto save”，選擇afterDelay

通用插件

Live Server

靜態(tài)服務(wù)，方便瀏覽html頁面，并且修改頁面后會(huì)立即更新

Material Icon Theme

解決目錄圖標(biāo)不明顯的問題

Chinese (Simplified)

中文支持

YAML

支持yml文件的格式

Visual Studio IntelliCode

只能感應(yīng)提示

Tabnine AI Autocomplete

具有AI特性的代碼智能提示

前端開發(fā)用到的插件：

Vetur （vue的支持）

Auto Close Tag （自動(dòng)添加HTML/XML的結(jié)束標(biāo)記）

Auto Rename Tag （自動(dòng)完成另一側(cè)標(biāo)簽的同步修改）

Auto Import （自動(dòng)處理import，支持TS和TSX）

JavaScript(ES6) code snippets —— ES6語法智能提示以及快速輸入，除js外還支

Path Intellisense —— 自動(dòng)路徑補(bǔ)全

HTML CSS Support —— 讓 html 標(biāo)簽上寫class 智能提示當(dāng)前項(xiàng)目所支持的樣式

vscode-color-picker 方便樣式里直接進(jìn)行顏色選擇

Prettier - Code formatter 代碼格式化

Beautify——格式化代碼，值得注意的是，beautify插件支持自定義格式化代碼規(guī)則

Bracket Pair Colorizer 2——給括號(hào)加上不同的顏色，便于區(qū)分不同的區(qū)塊，使用者可以定義不同括號(hào)類型和不同顏色

open in browser——直接右鍵項(xiàng)目單擊啟動(dòng)

開發(fā)java用到的插件：

// java基礎(chǔ)

Extension Pack for Java

Debugger for Java

Maven for Java

Project Manager for Java

Test Runner for Java

Spring Boot Extension Pack

Quarkus

Quarkus snippets

開發(fā)go用到的插件：

Go

Go Nightly

開發(fā)C#用到的插件：

C#語言開發(fā)支持

C# Extensions

Auto-Using for C#

C# XML Documentation Comments