HTML+CSS：图文结合让你深入了解css盒模型

本篇文章要给大家讲得算是比较重点的内容了，css盒模型。了解了它对你以后页面的排版和布局有着非常关键的作用。

css盒子模型 又称框模型 (Box Model) ，它包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。下图就为我们标准的盒模型示用意。

1）我们来看下边的一个例子。

创立一个div，div的宽度为200px，高度为200px，内填充为50px，边框为1px红色。

上图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），而后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是不算到盒子的总宽度的，它是用来将两个元素（盒子）隔开肯定的距离。

那么，div盒子的实际占据宽度 = 元素（div）的width + padding的左边距和右边距的值 + border的左右宽度；（302px）

div盒子的实际占据高度 = 元素（div）的height + padding的上下边距的值 ＋ border的上下宽度。（302px）

2）我们再写一个例子。

创立一个div，div的宽度为200px，高度为150px，背景颜色为#ccc，上填充为10px、右填充30px、下填充40px、左填充20px，上边框5px红色、右边框5px绿色、下边框5px黄色、左边框5px蓝色。那么我们的代码以及显示效果就如下图所示：

由上图我们可以看出来，div盒子的实际占据宽度 = 元素（div）的width（200px） + padding的左边距和右边距的值（20px+30px） + border的左右宽度（5px+5px）；（260px）

div盒子的实际占据高度 = 元素（div）的height（150px） + padding的上下边距的值（10px+40px） ＋ border的上下宽度（5px+5px）。（210px）

对于css的盒模型今天就先详情到这里，大家在平常可以自己多加练习练习，自己能算清楚某个元素实际占据多少的宽度。

每日金句： 所有的努力，不是为了让别人觉得你了不起，而是为了能让自己打心里看得起自己。喜欢我的文章的小伙伴记得关注一下哦，每天将为你升级最新知识。