CSS 盒子模型

XiSoil發表於2024-09-16
CSS模型

當對一個文件進行佈局(layout)的時候，瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型(CSS basic box model)，將所有元素表示為一個個矩形的盒子(box)

一個盒子由四個部分組成:content、padding、border、**margin

**

img

content：即實際內容

padding：即內邊距，清除內容周圍的區域，內邊距是透明的，取值不能為負，受盒子的 background 屬性影響

border：即邊框，圍繞元素內容的內邊距的一條或多條線，由粗細、樣式、顏色三部分組成

margin：即外邊距，在元素外建立額外的空白，空白通常指不能放其他元素的區域

CSS 中盒子模型分為兩種

  • W3C 標準盒子模型 （預設情況）
  • IE 怪異盒子模型

W3C 標準盒子模型：

  • 盒子總寬度=width+ padding + border + margin
  • 盒子總高度=height+ padding +border + margin

width,height 只包含內容的寬高

IE 怪異盒子模型：

  • 盒子總寬度=width+ margin
  • 盒子總高度 = height + margin

width/height包含了 padding 和 border 值

box-sizing

box-sizing: content-box|border-box|inherit

該屬效能夠控制如何計算一個盒子的寬高

  • content-box 預設值，元素的 width/height 不包含padding，border，與標準盒子模型表現一致
  • border-box 元素的 width/height 包含 padding，border，與怪異盒子模型表現一致
  • inherit 指定 box-sizing 屬性的值，應該從父元素繼承

相關文章