超級無敵級別的白話文介紹

盒子簡單的來說就是我們平常所使用div，所有的HTML元素可以看作盒子，一般是用來設計和佈局時使用。

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

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

簡單介紹一下元素

Margin(外邊距)清除邊框外的區域，外邊距是透明的。

　　margin:上，右，下，左　　　　　　四個值
　　margin：上，左右，下　　　　　　 三個值
　　margin:上下，左右　　　　　　　　兩個值
　　margin: 上下左右　　　　　　　 　一個值
左右居中: margin-left: auto;margin-top: 0;

Border(邊框) 圍繞在內邊距和內容外的邊框。

　　solid 實線
　　double 雙實線
　　dotted 點虛線
　　dashed 線段虛線

Padding(內邊距)清除內容周圍的區域，內邊距是透明的。

　　與Margin(外邊距)同理

Content(內容) 盒子的內容，顯示文字和影象。

注意：

width和height： 內容 的寬度、高度（不是盒子的寬度、高度）；padding：內邊距 border：邊框 margin：外邊距 標準盒子模型 中， width 和 height 指的是內容區域 的寬度和高度。當你指定一個 CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完整大小的元素，你還必須新增內邊距，邊框和外邊距。

ヽ(●-`Д´-)ノ 重要的事情說三遍！！！

你設定CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度，不是盒子的寬度、高度！！！

你設定CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度，不是盒子的寬度、高度！！！

你設定CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度，不是盒子的寬度、高度！！！