本篇文章要给大家讲的算是比较重点的内容了，css盒模型。理解了它对你以后页面的排版和布局有着非常关键的作用。
什么是css盒模型？
css盒子模型又称框模型(BoxModel)，它包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。下图就为我们标准的盒模型示意图。
css盒模型进阶练习
1）我们来看下边的一个例子。
创建一个div，div的宽度为px，高度为px，内填充为50px，边框为1px红色。
上图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是不算到盒子的总宽度的，它是用来将两个元素（盒子）隔开一定的距离。
那么，div盒子的实际占据宽度=元素（div）的width+padding的左边距和右边距的值+border的左右宽度；（px）
div盒子的实际占据高度=元素（div）的height+padding的上下边距的值＋border的上下宽度。（px）
2）我们再写一个例子。
创建一个div，div的宽度为px，高度为px，背景颜色为#ccc，上填充为10px、右填充30px、下填充40px、左填充20px，上边框5px红色、右边框5px绿色、下边框5px黄色、左边框5px蓝色。那么我们的代码以及显示效果就如下图所示：
由上图我们可以看出来，div盒子的实际占据宽度=元素（div）的width（px）+padding的左边距和右边距的值（20px+30px）+border的左右宽度（5px+5px）；（px）
div盒子的实际占据高度=元素（div）的height（px）+padding的上下边距的值（10px+40px）＋border的上下宽度（5px+5px）。（px）
对于css的盒模型今天就先介绍到这里，大家在平时可以自己多加练习练习，自己能算清楚某个元素实际占据多少的宽度。
每日金句：所有的努力，不是为了让别人觉得你了不起，而是为了能让自己打心里看得起自己。喜欢我的文章的小伙伴记得