CSS：盒模型

发表于 | 分类于 | | 阅读数
字数统计: 115 字 | 阅读时长 ≈ 1 分钟

标准模型

1
2
盒模型宽高 = margin + border + padding + content
元素宽高（元素占据的位置） = content

image

IE盒模型

1
2
盒模型宽高 = margin + 元素宽高
元素宽高（元素占据的位置） = border + padding + content

image

修改盒模型（box-sizing）

box-sizing

  • content-box：默认属性，标准盒模型
  • border-box：使元素宽高包括padding和border，内容区的实际宽度会是元素宽高减去border + padding的计算值。（即IE盒模型）
-------------本文结束 感谢您的阅读-------------