「Web前端開發進階篇」CSS框模型

兩篇文章我們把「Web前端開發進階篇」CSS樣式講解完了，接著我們來講解下一篇文章，關于CSS框模型的內容知識，小伙伴們跟上我的節奏，動起來，Let's go！

【引言】

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

CSS 框模型

CSS 框模型概述

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

CSS框模型

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

提示：背景應用于內容的內邊距、邊框組成的區域。

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

* {margin: 0;padding: 0;}

在CSS中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：

CSS高度

CSS就可以這樣寫：

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

提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。

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

瀏覽器兼容性

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

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

【在CSS中，我們把padding和margin統稱為內邊距和外邊距，邊框（border）內的是內邊距，邊框外的就是外邊距，好記吧。哈哈】

CSS內邊距（padding）

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

#box
{padding: 10px;}

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

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

單邊內邊距屬性

可以通過下面四個屬性，分別設置各邊的內邊距：

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

例如：

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

單邊內邊距

CSS邊框

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

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

1、邊框的樣式

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

.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 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值）和 thick。

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

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

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

或者：

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

定義單邊寬度

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

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

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

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

沒有邊框

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

3、邊框的顏色

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

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

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

border-color: transparent;

CSS 外邊距

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。

設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

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

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

值復制：

在前兩節中提到過值復制。下面我們為您講解如何使用值復制。

有時，我們會輸入一些重復的值：

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

通過值復制，您可以不必重復地鍵入這對數字。上面的規則與下面的規則是等價的：

p {margin: 0.5em 1em;}

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

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

下圖提供了更直觀的方法來了解這一點：

值復制

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

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

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

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

單邊外邊距屬性

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

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

提示：

Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的默認值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進行自定義。

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

也很簡單，看張圖就明白了：

外邊距合并

當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看下圖：

外邊距合并

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

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

外邊距合并

如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：

外邊距合并

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

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

外邊距合并

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

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

PS：

本文為‘Web前端進階指南’原創，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂的下方留言評論或私信。謝謝大家哈！

、文本格式化標簽

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

b i s u 只有使用沒有強調的意思 , strong em del ins 語義更強烈

二、注釋標簽

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

語法

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

是一款輕量級且非常好用的ide，我平時用idea開發java，但是開發vue，go和net core會選擇用vscode，因為它的內存占用要比idea小很多，下面羅列了些快速使用vscode的信息，方便更換電腦時可以快速啟用它，涉及常用快捷鍵，個性化配置，適用于各種語言開發的插件。

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

下載

https://code.visualstudio.com/Download

常用快捷鍵

打開命令面板（F1）

快速打開（ctrl + P）

注釋行（ctrl + /）

全局搜索（ctrl + shift + F）

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

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

個性化配置

設為雙擊打開文件

設置里搜索“open mode”，把下拉選項改成doubleClick

取消點擊預覽功能

設置里搜索“preview”，點擊工作臺，把第一個打勾框的勾去掉

自動保存

設置里搜索“auto save”，選擇afterDelay

通用插件

Live Server

靜態服務，方便瀏覽html頁面，并且修改頁面后會立即更新

Material Icon Theme

解決目錄圖標不明顯的問題

Chinese (Simplified)

中文支持

YAML

支持yml文件的格式

Visual Studio IntelliCode

只能感應提示

Tabnine AI Autocomplete

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

前端開發用到的插件：

Vetur （vue的支持）

Auto Close Tag （自動添加HTML/XML的結束標記）

Auto Rename Tag （自動完成另一側標簽的同步修改）

Auto Import （自動處理import，支持TS和TSX）

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

Path Intellisense —— 自動路徑補全

HTML CSS Support —— 讓 html 標簽上寫class 智能提示當前項目所支持的樣式

vscode-color-picker 方便樣式里直接進行顏色選擇

Prettier - Code formatter 代碼格式化

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

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

open in browser——直接右鍵項目單擊啟動

開發java用到的插件：

// java基礎

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

開發go用到的插件：

Go Nightly

開發C#用到的插件：

C#語言開發支持

C# Extensions

Auto-Using for C#

C# XML Documentation Comments

在線咨詢

上一篇：小科普 - 用“Stylus”讓你的網頁更加好看！什么是CSS？
下一篇：CSS怎么制作立體的3D照片墻效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「Web前端開發進階篇」CSS框模型

CSS 框模型概述

CSS內邊距（padding）

CSS邊框

CSS 外邊距

外邊距合并

、文本格式化標簽

二、注釋標簽

您的項目需求