css-盒模型

Zero_A發表於2018-06-30
CSS模型

HTML為流式文件（自上而下），每個HTML元素都會渲染成為一個矩形（也可以理解為盒子，盒模型概念因此而來），這個矩形最終的呈現形式受很多因素影響。其中包括元素是內聯還是塊級（inline box、block box），box-sizing屬性和display屬性。

內聯和塊狀

內聯和塊狀元素的區別大體有兩點，有無寬高概念和是否獨佔一行。

  • 內聯元素本身沒有寬高和padding、margin的概念（但是你設定寬高、padding、margin屬性時，有些瀏覽器也是有作用的），他的大小完全由所包含內容撐起
  • 塊狀元素具有寬高、padding和margin屬性，而且寬度預設佔滿一行

可參考塊級元素和行內元素

box-sizing

在HTML中，任何元素都會被呈現為一個矩形。矩形由內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）構成。

那麼，問題來了。當我們設定一個元素的寬度和高度時（假如都是100px），那麼這100px到底包含了上面矩形構成裡面的哪幾個部分？答案是這要看box-sizing屬性。

  • box-sizing: content-box
.content-box{
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 10px;
    box-sizing: content-box;
}
複製程式碼

如上面css所描述，該元素box-sizing為content-box，那麼整個元素的盒模型如下圖所示：

css-盒模型

  • box-sizing: border-box
.border-box{
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
}
複製程式碼

如上面css所描述，該元素box-sizing為border-box，那麼整個元素的盒模型如下圖所示：

css-盒模型

大部分瀏覽器預設盒模型為content-box，即所宣告的寬高就是元素的寬高，不會被padding和margin所佔用。

display屬性

display指定了元素渲染HTML矩形的型別（type of rendering box）：

  • none：隱藏物件。與visibility屬性的hidden值不同，其不為被隱藏的物件保留其物理空間
  • inline：指定物件為內聯元素
  • inline-block：指定物件為內聯塊元素
  • block：指定物件為塊元素
  • list-item：指定物件為列表專案
  • inline-list-item：指定物件為列表專案
  • table：指定物件作為塊元素級的表格。類同於html標籤<table>
  • inline-table：指定物件作為內聯元素級的表格。類同於html標籤<table>
  • table-caption：指定物件作為表格標題。類同於html標籤<caption>
  • table-cell：指定物件作為表格單元格。類同於html標籤<td>
  • table-row：指定物件作為表格行。類同於html標籤<tr>
  • table-row-group：指定物件作為表格行組。類同於html標籤<tbody>
  • table-column：指定物件作為表格列。類同於html標籤<col>
  • table-column-group：指定物件作為表格列組顯示。類同於html標籤<colgroup>
  • table-header-group：指定物件作為表格標題組。類同於html標籤<thead>
  • table-footer-group：指定物件作為表格腳註組。類同於html標籤<tfoot>
  • run-in：根據上下文決定物件是內聯物件還是塊級物件
  • box：將物件作為彈性伸縮盒顯示。（伸縮盒最老版本）
  • inline-box：將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）
  • flexbox：將物件作為彈性伸縮盒顯示。（伸縮盒過渡版本）
  • inline-flexbox：將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）
  • flex：將物件作為彈性伸縮盒顯示。（伸縮盒最新版本）
  • inline-flex：將物件作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）

相關文章