什么是盒子
CSS初学者在开始学习CSS的基本知识时,必须学习过“padding”、“border”和“margin”,即内部边距、边框和外部边距。它们三者构成一个“盒子”。
就像我们收到的快递一样,我们原本买了一个小手机,却收到了这么大的箱子。
因为手机的白色包装盒和手机机之间有一个隔板(内缘),所以手机的白色盒子有厚度。
虽然它很薄(边框),但在箱子和快递箱之间还有一层泡沫板(外缘)。这是一个典型的盒子。
真正的内容是这些单词,文本周围有10倍的内边距、5倍的边框和10倍的外边距。
盒子模型的宽度如何计算
1.固定宽度的盒子
<div style="padding:10px;border:5px solid blue; margin: 10px; width:300px;">
//内容
</div>
得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是 300px,也就是我们设置的宽度。
在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + `border`宽度 + `padding`宽度 + `margin`宽度)之和**。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。
2.充满父容器的盒子
默认情况下,`div`是`display:block`,宽度会充满整个父容器。
<div style="padding:10px;
border:5px solid blue; margin: 10px; width:300px;">
</div>
但是别忘记,这个 div 是个盒子模型,它的整个宽度包括(内容宽度 + `border`宽度 + `padding`宽度 + `margin`宽度),整个的宽度充满父容器。
问题就在这里。如果父容器宽度不变,我们手动增大`margin`、`border`或`padding`其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。
暂无评论内容