CSS盒模型

一，基本概念

盒模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
具体对应的内容如下图所示：

注意：这里padding属性对应的上下左右分别是：padding-top, padding-bottom, padding-left , padding-right
其余的属性以此类推
二，边框

下图是border对应的CSS属性：

这里举一个例子
样式设置：

body部分:

最终效果：

这个例子是演示对边框颜色的设置，其它的大家自己去试。
三，内边距

四，外边距

最后我们来综合盒模型写一个例子：

最终效果：

上图我们可以看出浏览器解析盒模型参数
可以看得出跟自己设置的一一对应，而且在右边的图上看得形象生动。
初学者可以对调试一下，然后按F12对照着学习。