【CSS非全解03】CSS基础-盒模型

CSS盒模型

CSS盒模型是网页布局和设计的基础，它定义了元素在网页中的空间占用和布局方式。盒模型直观地分为两种：content box（内容盒）和border box（边框盒）。

一、content box（内容盒）

定义：content box的宽、高度只包含content（内容区域）。
特点：
当你为元素设置一个宽度或高度时，这个值仅代表内容区域的尺寸。
如果元素有padding（内边距）、border（边框）或margin（外边距），这些值会额外增加元素的总尺寸，但不会影响内容区域的尺寸。
这种模型可能导致布局上的不直观，因为你需要手动计算总尺寸。

二、border box（边框盒）

定义：border box的宽、高度包含到border以内，即包括border、padding和content。
特点：
当你为元素设置一个宽度或高度时，这个值代表元素的总尺寸，包括内容区域、内边距和边框。
这种模型更符合视觉习惯，因为你可以直接设置元素的期望尺寸，而不用担心内边距和边框对总尺寸的影响。
在响应式布局中，border box模型更容易控制元素的尺寸。

三、盒模型的尺寸计算公式

四、盒模型的层次和关系

margin：元素边框以外的空白区域，用于控制元素与其他元素之间的间距。
background-color 和 background-image：元素的背景颜色和背景图片，默认会延伸到边框的外沿（但边框会覆盖在背景上），可以通过background-clip属性改变这一行为。
padding：元素边框到内容之间的空白区域，用于增加内容周围的间距。
border：元素的边框，用于定义元素的边界和样式。
content：元素的内容区域，包含文本、图片等实际内容。

五、border-box的推荐使用

六、其他注意事项

块级盒的默认宽度：如果未声明宽度，并且盒子是静态或相对定位，有内容content，宽度会保持100％的宽度。改变了padding和border的值不为0后，块级盒会向内推动，而不是向外扩展。但是，如果明确设置盒子的宽度为100％，那么padding就会向外延展。
margin合并：margin不会影响盒子本身的大小，但会影响盒子与其他元素之间的间距。margin合并主要发生在父子元素和兄弟元素之间，可以通过padding、border、overflow:hidden或display:flex等方式阻止合并。

综上所述，CSS盒模型是网页布局和设计的基础，理解并掌握content box和border box的区别以及盒模型的层次和关系对于实现精确的布局和设计至关重要。

热门标签