DIV + CSS 學習筆記（盒模型）

本文目錄

- - - 一、盒模型

一、盒模型

網頁中一個一個的元素塊，都可以看作是一個盒子，只不過這個盒子在視覺上是二維的，即它是一個平面圖形。

比如下圖紅色的正方形就是用 div 元素實現的 200 * 200 的盒子。

.box {
    width: 200px;
    height: 200px;
    background-color: red;
}

<body>
    <div class="box"></div>
</body>

通過檢查元素可以看到盒子的寬高：
通過檢查元素也可以看到盒子的寬高

（一）盒邊框（border）

盒子除了可以設定寬度和高度外，還可以加邊框，我們給這個盒子加一個藍色、實線、寬度（粗細）為5px的邊框。

.box {
	width: 200px;
	height: 200px;
	background-color: red;
	border: blue solid 5px;
}

加邊框
再次檢查元素檢視：
210
發現盒子的寬高都變成了210px，說明總寬度和總高度是重新加了邊框的寬度的。

盒子總寬度210px = 5px（盒子左邊框寬度）+ 200px（盒子原寬度）+ 5px（盒子右邊框寬度），總高度同理。

（二）內邊距（padding）

既然是盒子，那麼盒子當中自然是可以放內容的，比如：

<div class="box">Hello World！</div>

可以放內容
這時候的內容和盒子邊框之間是沒有邊距的，即內容緊貼著盒子的上邊框和左邊框。

我們可以通過增加padding屬性讓內容和盒子邊框之間產生邊距：

.box {
	width: 200px;
	height: 200px;
	background-color: red;
	border: blue solid 5px;
	color: white; /* 改變字型顏色 */
	padding: 10px;
}

padding
這時候內容與盒子上邊框和左邊框之間各有了20px的距離，但是盒子的寬高明顯也變大了。

我們通過檢查元素檢視：

發現這時候盒子的寬高都變成了250px，其實原因和加邊框的時候相同，上下左右都加上了兩倍的padding值（20px * 2 = 40px）。

（三）外邊距（margin）

外邊距，顧名思義，就是盒子外邊的距離。

一般瀏覽器中都對body標籤預設設定了8px的margin值，當然不同瀏覽器的這個數值也可能不同，它是由瀏覽器的user-agent-stylesheet提供的，這裡我們不做進一步的研究。

我們通過檢查元素檢視：
margin
圖中橙黃色的部分就是8px的padding，它使元素與body的上邊框和左邊框各產生了8px的距離。

當然，我們可以將這個預設的padding值去掉，然後再加上我們希望的padding值。

body {
	margin: 0; /* 將預設的 8px margin 設定為 0px */
}
.box {
	width: 200px;
	height: 200px;
	background-color: red;
	border: blue solid 5px;
	color: white;
	padding: 20px;
	margin: 20px; /* 將 margin 設定為 20px */
}

網頁效果：
在這裡插入圖片描述
可以看到外邊距明顯增大。

通過檢查元素檢視：
在這裡插入圖片描述
padding已經變為20px。

（四）盒內容（element）

其實盒內容真正的寬高就是起初我們設定的200px，多出來的寬高都是由於我們設定邊框和內外邊距所產生的。

（五）盒模型計算

通過以上例子我們就可以得出盒模型的計算公式了：

總寬度 = 左右border + 左右padding + element內容寬

總高度 = 上下border + 上下padding + element內容高

如果我們想讓後來加的邊框和內外邊距不加到初始的內容寬高中來計算，也就是說，即使加了邊框和內外邊距之後，總的寬高仍然是起初設定的寬高。我們可以通過設定box-sizing: border-box;來實現。

.box {
	width: 200px;
	height: 200px;
	background-color: red;
	border: blue solid 5px;
	color: white;
	padding: 20px;
	margin: 20px; /* 將 margin 設定為 20px */
	box-sizing: border-box;
}

我們通過檢查元素來檢視效果：

通過效果圖可以看到，我們設定的邊框和內外邊距仍然存在，但是盒子的寬高恢復到了起初設定的200px，邊框和內外邊距沒有佔用額外的寬高。

（六）塊級元素與內聯元素的區別和轉換

1. 區別

（1）塊級元素獨佔一行，而內聯元素會和其它的內聯元素共佔一行。
（2）塊級元素可規定寬度和高度；內聯元素會隨自身內容的多少自動變化寬度和高度。

2. 轉換

（1）塊級元素轉為內聯元素：display:inline;
（2）內聯元素轉為塊級元素：display:block;

案例1：

我們再複製一個div:

<body>
    <div class="box">Hello World！</div>
    <div class="box">Hello World！</div>
</body>

由於div是塊級元素，各自獨佔一行，所以在頁面中的效果是這樣的：
div
我們試著新增display:inline;將它們轉為內聯元素，讓它們共佔一行：

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    border: blue solid 5px;
    color: white;
    padding: 20px;
    margin: 20px; /* 將 margin 設定為 20px */
    box-sizing: border-box;
    display: inline; /* 將塊級元素轉為內聯元素 */
}

這時候發現樣式顯示異常，是因為內聯元素設定的寬高不會起作用，而且padding和margin也出現了異常，這也是內聯元素和塊級元素的一個區別。

如果想解決這個問題，可以將display: inline;換成display: inline-block;，這樣既可以讓元素共佔一行，又可以應用塊級元素的樣式，同時具備兩種元素的特點。

案例2：

我們定義兩個內聯元素：

.inline-box {
   background-color: red;
   color: white;
}

<body>
    <span class="inline-box">內聯元素1</span>
    <span class="inline-box">內聯元素2</span>
</body>

可以看到，內聯元素預設是共佔一行的，我們試著新增display: block;將它們轉為塊級元素，讓它們各佔一行：

.inline-box {
    background-color: red;
    color: white;
    display: block;
}

block
可以看到，兩個元素已經是各佔一行了。

補充一點，元素在不設定寬度的情況下，預設寬度是父元素的100%。