网页设计盒模型举例

1、在网页设计中盒模型的学习是必不可少的，从外到内依次是magin、boder、padding、content

3、点击左上角图标，在浏览器查看效果如下图，按F12打开开发者工具，选中div红色部分是div，黄色就是margin外边距

5、在浏览器查看效果，黑色的就是边框，边框的宽度相当于增加原来div的厚度，不会影响外边距

7、内边距会占用div的空间，紧按着边框

9、在浏览器查看效果，内容会在内边距里边，这就是简单的盒模型实例，是网页设计必须掌握的基本功