【CSS盒模型】CSS两种盒模型

目录

• CSS盒模型
• 盒模型的组成
• 两种盒模型
• 总结
• 参考资料

一、CSS 盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

其实 HTML 都可以看做是盒子模型，只需要使用 CSS 控制就行了

二、盒模型的组成

一个盒子由 4 个部分组成：margin+border+padding+content

MDN 的解释

• 内容区域content：由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

• 内边距区域padding：由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

• 边框区域border：由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。

• 外边距区域margin：由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

个人整理

• content：内容，即在盒子中文字和图片的区域
• padding：内边距，盒子的内边框与内容之间的距离
• border：边框，即盒子边框的厚度。
• margin：外边距，盒子与外界参照物的距离

三、两种盒模型

在 CSS 盒模型中有两种盒模型 box-sizing：border-box | content-box

W3C 盒模型（标准盒模型）

标准盒模型就是content-box：其中 width 只包含到 content 边界，width=content区域

IE 盒模型

IE 盒模型就是border-box：其中 width 包含到 border 边界：width=border+padding+content

四、总结

CSS 盒模型分两种。一种是content-box，另一种是border-box。其中 content-box 包含到 content 边界 ，width 只包含 content。border-box 包含到 border 边界，width 包含 border+padding+content

五、参考资料

html 中文网

MDN–CSS 基础盒模型