css 盒模型

基本結構

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

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

• Css 盒模型 區分 外部顯示型別 outer display type 和 內部顯示型別 inner display type。
• 外部顯示型別，還依賴於 其 包含塊 的內部顯示型別。

盒尺寸

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

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日
原文作者：雕刻零碎 

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