css 盒模型

基本結構

盒基本的模型就是裡面和外面，界定它的就是四條邊。

Css 盒模型的表現，有以下的規則：

每個盒都有一塊內容區（content area）和周圍可選的padding，border和margin區域，每塊區域的尺寸通過下面定義的屬性指定。

1_1

margin，border和padding可以分為上，右，下和左4部分（例如，圖中，”LM”表示左外邊距，”RP”表示右內邊距，”TB”表示上邊框等等）

4塊區域（內容，內邊距，邊框和外邊距）中每一塊的邊界叫一條“邊界（edge）”，所以每個盒有4條邊界：

內容邊界或內邊界

內容邊界環繞著盒的width和height指出的矩形，通常取決於元素的呈現（rendered）內容。4條內容邊界定義了盒的內容框（content box）
內邊距邊

內邊距邊界環繞著盒的內邊距。如果內邊距的寬度為0，那麼內邊距邊界就和內容邊界相同。4條內邊距邊界定義了盒的內邊距框（padding box）
邊框邊界

邊框邊界環繞著盒的邊框。如果邊框的寬度為0，那麼邊框邊界就和內邊距邊界相同。4條邊框邊界定義了盒的邊框框（border box）.
外邊距邊界或外邊界

外邊距邊界環繞著盒的外邊距。如果外邊距的寬度為0，那麼外邊距邊界就和邊框邊界相同。4條外邊距邊界定義了盒的外邊距框（margin box）

每條邊界都可以細分成上，右，下和左邊界。

原文釋出時間為：2018年02月10日
原文作者：雕刻零碎

本文來源：開源中國如需轉載請聯絡原作者