Box model

習題預習

1. 什麼是Box model？
2. Box model由哪幾個部分組成？
3. 如何使用Box model來修改元素的寬度和高度？
4. 如何使用Box model來添加邊框和填充？
5. Box model的不同部分會如何影響元素的網頁排版？

說明知識

Box model是CSS的概念，它針對每個HTML元素定義了一個盒子，包含了四個部分：內容(content)、填充(padding)、邊框(border)和外邊距(margin)。這個盒子規定了元素的大小和位置，在設計網頁時非常有用。

舉例來說，如果我們想要設計一個有紅色邊框的段落元素，可以使用以下的CSS代碼：

p {
    border: 1px solid red;
    padding: 10px;
}

這個代碼會把每個段落元素包裝在一個盒子裡，其中邊框寬度為1px，顏色為紅色。填充則是在內容和邊框之間留下空白的區域，這裡設置的填充為10px。如果我們在網頁上使用這個代碼，每個段落都會有一個紅色的框框，並且在框框和段落內容之間留下10px的空白。

彙總重點

1. Box model是CSS中一個非常重要的概念。
2. Box model將每個HTML元素視為一個"盒子"，該盒子由四種部分組成：內容(content)、填充(padding)、邊框(border)、外邊距(margin)。
3. 內容是盒子中文本、圖像和任何內嵌元素的區域，填充是內容區域周圍的區域，邊框是填充周圍的一條線條，外邊距是邊框周圍的空間區域。
4. Box model可以用於控制元素的寬度、高度、內容位置、邊框寬度、填充量和外邊距空間等屬性。
5. Box model也可以用於定位元素、創建多列佈局和設置元素間的間距。
6. Box model是CSS布局和設計中不可或缺的基礎知識。

知識測驗

1. 如果一個元素的寬度設置為200px，內邊距（padding）為10px，外邊距（margin）為20px，那麼該元素的實際寬度是多少？

答案：240px（200px + 210px + 220px）

2. 如果一個元素的高度設置為150px，內邊距（padding）為15px，外邊距（margin）為30px，那麼該元素的實際高度是多少？

答案：210px（150px + 215px + 230px）

3. 如果一個元素的寬度設置為50%、內邊距（padding）為5%、外邊距（margin）為10%，並且其父元素的寬度為600px，那麼該元素的實際寬度是多少？

答案：390px（600px * 0.5 - 2* 600px * 0.05 - 2*600px * 0.1）

4. 如果一個元素的外邊距（margin）設置為20px，內容寬度為200px，內邊距（padding）為15px，那麼該元素的總寬度是多少？

答案：250px（200px + 215px + 220px）

5. 如果一個元素的高度設置為100px、外邊距（margin）為10px、下邊距（padding）為20px、那麼該元素的實際高度是多少？

答案：130px（100px + 20px + 10px）