解释一下css盒模型？

2020-08-26 09:35发布

5条回答

2021-12-13 11:32

根据盒模型，所有文档元素在页面中都会生成一个矩形区域，即盒子。盒子中包含四个部分：content(实际内容)、border(边框)、padding(内边距)、margin(边距)。

Margin(外边距)：

边框外的区域，即盒子与盒子之间的距离，外边距是透明的。

Border(边框)：

围绕在内边距和内容外的边框。border以及在它之内的区域叫做border-box，即边框盒。

Padding(内边距)：

盒子边框到盒子内容之间的距离，内边距是透明的。padding以及在它之内的区域叫做padding-box，即填充盒。

Content(内容)：

盒子的内容部分，显示文本和图像。它所在的区域叫做content-box，即内容盒。

当对一个HTML文档进行布局(lay out)的时候，浏览器的渲染引擎便会根据标准之一的 CSS 基础框盒模型(CSS basic box model)进行渲染。