如何理解CSS的盒子模型 _我们通过一个案例来讲解盒子

当我们在写一个html页面时，页面中的每一个元素都相当于一个盒子。在网页上右键选择“检查”时，我们可以在开发者工具的Element选项中看到页面中有哪些元素，点击某一个元素，可以看到该元素的宽高和背景色等信息，同时下方会展示一个方框套一个方框的盒子，上面标注有尺寸信息，如下图所示。我们在学习盒子模型时首先要了解三个概念：border是盒子的边框，相当于盒子的四个挡板，可以设置颜色（border-color），宽度（border-width），样式（border-style），边框可以用连写模式（borde工具/材料 Sublime Text3
操作方法 01 我们通过一个案例来讲解盒子模型，假设有一个宽400px高300px背景颜色是粉色的大盒子，有一个宽200px高140px背景颜色为红色的小盒子，我们在不改变盒子大小的情况下，将小盒子放入大盒子的中心位置，如何实现呢？我们创建一个html页面，在<body>标签中设置一个div ， class取值为big ，在div中再嵌套一个div ， class取值为small 。然后我们在<head>标签中添加<style>标签用于设置css的样式，如下图所示，其中.big和.small均为类选择器。

文章插图

02 【如何理解CSS的盒子模型】在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 。