一,基本概念
盒模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
具体对应的内容如下图所示:
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/178594b8ec0991b53d8fb31adeb2927a.png)
注意:这里padding属性对应的上下左右分别是:padding-top, padding-bottom, padding-left , padding-right
其余的属性以此类推
二,边框
下图是border对应的CSS属性:
这里举一个例子
样式设置:
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/874216e39eae4abf28f39296345d44cf.png)
body部分:
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/acc2db735f13611e49a553cb82f710ca.png)
最终效果:
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/ab3bd84bb84cc940be26f69fef2cf438.png)
这个例子是演示对边框颜色的设置,其它的大家自己去试。
三,内边距
四,外边距
最后我们来综合盒模型写一个例子:
最终效果:
上图我们可以看出浏览器解析盒模型参数
可以看得出跟自己设置的一一对应,而且在右边的图上看得形象生动。
初学者可以对调试一下,然后按F12对照着学习。