網(wǎng)頁元素通過CSS盒模型占據(jù)空間，每個元素由內(nèi)容、內(nèi)邊距、邊框和外邊距組成。 1. 內(nèi)容區(qū)（content）是核心區(qū)域，通過width和height設定大??；2. 內(nèi)邊距（padding）圍繞內(nèi)容，增加元素整體尺寸；3. 邊框（border）定義盒子輪廓，也會影響尺寸；4. 外邊距（margin）控制與其他元素的距離，可能合併影響佈局。使用box-sizing: border-box;可讓width和height包含padding和border，便於控制總大小。理解這四個部分及其相互關係是掌握網(wǎng)頁佈局的關鍵。

網(wǎng)頁元素在頁面佈局中是如何占據(jù)空間的？答案就在CSS 的盒模型（Box Model）裡。每個HTML 元素本質(zhì)上都是一個盒子，而這個“盒子”由四部分組成：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。理解它們各自的作用，是掌握網(wǎng)頁佈局的基礎。

內(nèi)容區(qū)（Content）：盒子的核心

內(nèi)容區(qū)是你放文字、圖片或其他元素的地方，它決定了盒子最基本的大小。你可以通過width和height來設置內(nèi)容區(qū)的尺寸。

舉個例子：

 .box {
  width: 200px;
  height: 100px;
}

上面這段代碼設置了內(nèi)容區(qū)的寬高，但整個元素實際佔的空間還不止這些——因為還有padding、border 和margin。

默認情況下，瀏覽器使用的是標準盒模型（即content-box），也就是說你設置的width 和height 只對應內(nèi)容區(qū)，不包括其他部分。

如果你希望width 和height 包含padding 和border，可以加上這句：

 box-sizing: border-box;

內(nèi)邊距（Padding）：內(nèi)容與邊框之間的空隙

Padding 是圍繞內(nèi)容的一圈空白區(qū)域。它的作用是讓內(nèi)容不會緊貼邊框，提升視覺舒適度。

常見用法：

• padding: 10px;四個方向都加10px 內(nèi)邊距
• padding-left: 20px;只給左邊加內(nèi)邊距

注意：padding 會影響整個盒子的總寬度和高度。比如內(nèi)容寬200px，左右padding 各10px，那這部分就變成了220px。

邊框（Border）：盒子的邊界線

Border 是盒子的“輪廓”，它可以有顏色、樣式和寬度。雖然它本身不佔太多空間，但它確實會增加盒子的整體尺寸。

基本寫法：

 border: 2px solid #333;

你可以單獨設置某一邊的邊框，例如：

• border-top: 1px dashed red;
• border-right-width: 5px;

就像padding 一樣，border 也會增加盒子的總寬度和高度。如果你用了box-sizing: border-box; ，就不需要擔心這個問題了。

外邊距（Margin）：控制與其他元素的距離

Margin 是盒子與其他元素之間的距離。它是透明的，不會有任何背景色或邊框，只是用來做“隔離帶”。

常用技巧：

• margin: 0 auto;居中塊級元素
• margin-bottom: 20px;控制元素之間的垂直間距

值得注意的是，相鄰的兩個垂直方向上的margin 會發(fā)生“合併”現(xiàn)象（margin collapse），這在佈局時可能會帶來意料之外的效果，需要特別留意。

基本上就這些。 CSS 盒模型看起來簡單，但在實際佈局中非常關鍵。很多初學者遇到的“為什麼我的div 比預期大？”、“為什麼margin 不起作用？”等問題，往往都可以從盒模型的角度找到原因。只要記住四個部分的關係，並善用box-sizing ，就能更自如地掌控網(wǎng)頁佈局。

以上是了解CSS框型號：內(nèi)容，填充，邊框，邊緣的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！