目录
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