CSS盒模型

CSS框模型

所有HTML元素可被認為是箱。在CSS中，“框模式”一詞談論設計和佈局時使用。

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

下圖說明了盒模型：

不同的部分的說明：

盒子模型允許我們添加一個邊框的元素，和元素之間定義的空間。

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

為了在所有瀏覽器中正確設置元素的寬度和高度，你需要知道的盒模型是如何工作的。

	重要提示：當您使用CSS元素的寬度和高度屬性，你剛才設置的內容區域的寬度和高度。要計算元素的全尺寸，還必須添加填充，邊框和邊距。

假設我們想要的風格<div>元素有350像素總寬度：

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

這裡是數學：

320px （寬）
+ 20px （左+右填充）
+ 10px （左+右邊框）
+ 0px （左+右頁邊距）
= 350px

元素的總寬度應計算如下：

共有元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右頁邊距

一個元件的總高度應該計算如下：

總元素高度=身高+頂部填充+底部填充+上邊框+下邊框+上邊距+底部邊距

	注意舊IE：Internet Explorer 8和更早的版本，包括填充和邊框width屬性。要解決此問題，添加<!DOCTYPE html>到HTML頁面。