CSS 盒子模型

📢 本文由 gemini-2.5-flash 翻譯

顯示模式

顯示模式是指標籤的呈現方式，用於排版網頁時，根據標籤的顯示模式選擇合適的標籤來擺放內容。

區塊級元素 (例如 div)
- 獨佔一行
- 寬度預設為父層的 100%
- 新增寬高屬性後生效
行內元素 (例如 span)
- 一行中可顯示多個
- 設定寬高屬性後不生效
- 寬高尺寸由內容撐開
行內區塊元素 (例如 img)
- 一行中可顯示多個
- 設定寬高屬性後生效
- 寬高尺寸也可以由內容撐開

可以透過 CSS 屬性 display 轉換顯示模式，其值為：

效果	區塊級	行內	行內區塊
屬性值	block	inline	inline-block

盒子模型

作用：排版網頁，擺放盒子與內容

盒子模型組成部分：

內容區域：width & height
內邊距：padding (出現在內容與盒子邊緣之間)
邊框線：border
外邊距：margin (出現在盒子外面)

邊框線

屬性值：邊框線粗細線條樣式顏色 不區分順序

常見線條樣式有：

線條樣式	實線	虛線	點線
屬性值	solid	dashed	dotted

1
2
3
div {
    border: 1px solid aqua;
}

當然，還有可以設定單獨方向的屬性，屬性值同上。

1
2
3
4
5
6
div {
    border-top: 1px solid red;
    border-left: 1px dashed red;
    border-bottom: 1px dotted red;
    border-right: 1px solid blue;
}

內邊距

設定內容與盒子邊緣之間的距離

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* 四個方向內邊距相同 */
div {
    padding: 10px;
}

/* 分別設定四個方向 */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

padding 也有多值寫法，可以透過一個屬性控制四個內邊距

取值個數	示例	含義
一個	`padding: 10px;`	四個方向皆為 10px
四個	`padding: 10px 20px 30px 40px;`	上右下左 (順時針)
兩個	`padding: 10px 30px 20px;`	上左右下
三個	`padding: 10px 20px;`	上下左右

尺寸內減模式

預設情況下，盒子尺寸 = 內容尺寸 + 內邊距尺寸 + 邊框尺寸，也就是說當給盒子加上 padding 和 border 屬性後，盒子會變大。

1
2
3
4
5
6
div {
    height: 200px;
    width: 200px;
    /* 此盒子尺寸會變為 240*240 */
    padding: 20px;
}

如果想要盒子大小為 200*200，需要手動計算並將 heigh 和 width 值調整為 160px。

而加上 box-sizing: border-box 後，盒子的大小將會恆定保持為 heigh 和 width 值。

1
2
3
4
5
6
7
div {
    height: 200px;
    width: 200px;
    /* 此盒子尺寸為 200*200 */
    padding: 20px;
    box-sizing: border-box;
}

外邊距

作用：拉開兩個盒子之間的距離。屬性值與 padding 的寫法相同。

外邊距不會使盒子變大

如果將 margin 的左右屬性值設定為 auto，該盒子將會水平置中。

1
2
3
4
5
6
div {
    height: 200px;
    width: 800px;
    /* 此盒子將會水平置中 */
    margin: 0 auto;
}

合併現象

垂直排列的同級元素，上下 margin 會合併，取值為較大的 margin。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .box1 {
        width: 200px;
        height: 100px;
        background-color: aqua;
        margin-bottom: 10px;
    }
    /* 兩個盒子之間間隔 20px */
    .box2 {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin-top: 20px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

塌陷問題

父子級標籤，子級新增上外邊距將會產生塌陷。會導致父級一起向下位移。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style>
    .father{
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* 兩個盒子將一起向下塌陷 50px */
        margin-top: 50px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

解決方法：

取消子級 margin，父級使用 padding
父級設定 overflow: hidden
父級設定 border-top

元素溢位

當盒子內容超過盒子大小時將產生溢位，可以用 overflow 屬性控制溢位元素的內容顯示方式。

屬性值	效果
hidden	溢位隱藏
scroll	溢位捲動 (無論是否溢位，都顯示捲軸)
auto	溢位捲動 (溢位才顯示捲軸)

行內元素垂直位置

行內元素 (如 span) 新增 margin 和 padding 無法改變垂直位置，此時可以透過行高來改變。

1
2
3
4
5
6
span {
    margin: 50px;
    padding: 20px;
    
    line-height: 100px;
}

圓角效果

使用屬性 border-radius 設定元素的外部邊框為圓角，屬性值為圓角半徑，可以使用數字+px 或百分比，多值與 padding 類似。

取值個數	含義
一個	四個角均為設定值
四個	左上右上右下左下 (順時針)
三個	左上右上+左下右下
兩個	左上+右下右上+左下

正圓形狀

給正方形盒子設定圓角屬性值為寬高的一半或 50%

1
2
3
4
5
6
7
8
div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    
    border-radius: 50%;
    /* 或者 border-radius: 50px */
}

膠囊形狀

給長方形盒子設定圓角屬性值為盒子高度的一半

1
2
3
4
5
6
7
div {
    width: 100px;
    height: 50px;
    background-color: aqua;
    
    border-radius: 25px;
}

陰影效果

使用 box-shadow 設定，屬性值：x y 模糊半徑擴散半徑顏色內外陰影

其中 x 與 y 是必填項，預設為外陰影，若設定內陰影屬性值為 inset