前端学习中有哪些盒模型

图片[1]-前端学习中有哪些盒模型-编程社
盒模型

什么是盒子

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`其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。

© 版权声明
THE END
喜欢就支持一下吧
点赞115 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称

    暂无评论内容