管理窝 当我们在写一个html页面时，页面中的每一个元素都相当于一个盒子。在网页上右键选择“检查”时，我们可以在开发者工具的Element选项中看到页面中有哪些元素，点击某一个元素，可以看到该元素的宽高和背景色等信息，同时下方会展示一个方框套一个方框的盒子，上面标注有尺寸信息，如下图所示。我们在学习盒子模型时首先要了解三个概念：border是盒子的边框，相当于盒子的四个挡板，可以设置颜色（border-color），宽度（border-width），样式（border-style），边框可以用连写模式（border:border-width border-style border-color）；padding是盒子的内边距，相当于盒子的填充物，用于设置盒子的内容和边框之间的距离；margin用于设置盒子之间的距离。
操作方法
【步骤01】
我们通过一个案例来讲解盒子模型，假设有一个宽400px高300px背景颜色是粉色的大盒子，有一个宽200px高140px背景颜色为红色的小盒子，我们在不改变盒子大小的情况下，将小盒子放入大盒子的中心位置，如何实现呢？我们创建一个html页面，在<body>标签中设置一个div，class取值为big，在div中再嵌套一个div，class取值为small。然后我们在<head>标签中添加<style>标签用于设置css的样式，如下图所示，其中.big和.small均为类选择器。
【步骤02】
在Sublime Text3的代码编辑区域，右键选择Open in Browser，在浏览器中打开该页面，如下图所示。我们可以看到此时大盒子和小盒子均在页面显示了，但是小盒子的位置却在大盒子的右上角。
【步骤03】
那如何将小盒子设置到大盒子的中间位置呢？此时我们最先想到的便是设置padding，即设置上下左右的内边距，我们使用大盒子和长宽减去小盒子的长宽，计算出大盒子的内边距上下为80px，左右为100px，因此在大盒子中设置padding：80px 100px，第一个值代表上下，第二个值代表左右，中间用空格隔开。
【步骤04】
在浏览器中打开后，我们发现小盒子非但没有设置在大盒子的中间，反而使大盒子变大了，这违背了题目中不可以改变盒子大小的前提。
【步骤05】
那如何才能不改变盒子的大小呢？我们思考一下，当盒子中增加了填充物，又不想改变盒子的大小，只能改变盒子的内容了，因此我们在盒子原有的宽高上面减去padding增加的上下左右宽高，此时大盒子的宽变为200px，高变为140px。
【步骤06】
在浏览器中打开我们可以看到小盒子中大盒子的中间，正是我们想要的效果。此时再提醒一下大家，我们设置的宽高其实是元素内容的宽高。因此在这里总结一下盒子宽高的计算公式，盒子的宽度为：border-left-width+padding-left+width+padding-right+border-right-width，盒子的高度为：border-top-width+padding-top+height+padding-bottom+border-bottom-width。
【步骤07】
上面的公式清晰的表示了盒子大小的计算方法，此时我们只给大盒子设置上和左的padding，同时大盒子的内容宽和高只减去上和左padding的大小，可以达到同样的效果。
【步骤08】
我们在设置padding时将右侧和底部的值设置为0，同时宽度在原来400px的基础上减去100px，高度在原来300px的基础上减去80px，在浏览器中查看的效果如下图所示，和步骤6的结果是一致的。
【步骤09】
接着我们为大小盒子添加边框（border），根据步骤6的公式我们可以看出border的宽度也会算在盒子的大小中，因此我们如果需要加上边框的话，还需要调整其他值的大小。我们先来看小盒子，给小盒子的边框设置为5px，那个在不改变小盒子大小的前提下，我们需要将小盒子的宽度减去10px变为190px，高度减去10px，变为130px。大盒子的设置我们紧接着步骤6的值来修改，在步骤6中我们可以看到大盒子的内容和小盒子的大小宽高是一致的，此时如果给大盒子添加10px的边框，不能再改变大盒子内容的宽高了，因此我们想到可以减少padding的值，因此分别将padding的值减少10px即可。
【步骤10】
将大小盒子的设置改为上图的设置即可，此时我们打开浏览器会看到盒子的效果同步骤6。此时我们发现还有一个margin的设置没有用上，margin是用于设置盒子之间的距离，不影响盒子模型的计算。很多标签默认带有margin和padding,所以将来在进行页面布局的时候一定要清除这些标签默认的margin和padding。
特别提示
注意padding的设置一般会改变盒子的大小，特殊情况除外。
微信扫一扫打赏
支付宝扫一扫打赏
评论列表()