CSS 框模型詳解

CSS 盒子模型(Box Model)

所有的 HTML 元素可以看作盒子

CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，包括：邊距，邊框 和 實際內容

下面的圖片說明了盒子模型：

• Margin(外邊距): 邊框外的區域
• Border(邊框): 圍繞在內邊距和內容外的邊框
• Padding(內邊距): 內容周圍的區域
• Content(內容): 盒子的內容

元素的寬度和高度

當你指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，元素的實際大小，還必須添加填充，邊框和邊距

div {
    width: 300px;
    height: 200px;
    border: 30px solid green;
    padding: 40px;
    margin: 50px;
}

最終元素的總寬度計算公式是這樣的：

元素實際寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左邊距 + 右邊距
元素實際高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上邊距 + 下邊距

因此上邊的元素寬度爲： 300 + 30 + 30 + 40 + 40 + 50 + 50 = 540
因此上邊的元素高度爲： 200 + 30 + 30 + 40 + 40 + 50 + 50 = 440

內邊距

padding-top: 10px;

padding-left: 10px;

padding-bottom: 10px;

padding-right: 10px;

# 設置四邊內邊距
padding: 10px;

# 分別設置 上下 左右
padding: 30px 40px;

# 分別設置 上 左右 下
padding: 30px 40px 50px;

# 分別設置 上 右 下 左
padding: 30px 40px 50px 60px;

外邊距

margin-top: 10px;

margin-left: 10px;

margin-bottom: 10px;

margin-right: 10px;

# 設置四邊外邊距
margin: 10px;

# 分別設置 上下 左右
margin: 30px 40px;

# 分別設置 上 左右 下
margin: 30px 40px 50px;

# 分別設置 上 右 下 左
margin: 30px 40px 50px 60px;

# 自動水平居中
margin: auto;

外邊距自動合併

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

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距合併

外邊距合併（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行佈局時，它會造成許多混淆。

簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖:

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