1、在网页设计中盒模型的学习是必不可少的，从外到内依次是magin、boder、padding、content
2、打开Pycharm开发工具，新建‘he.html’，并写代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>he</title> <style> div{ margin:15px; width:200px; height:300px; background-color:red; } </style></head><body> <div> </div></body></html>
3、点击左上角图标，在浏览器查看效果如下图，按F12打开开发者工具，选中div红色部分是div，黄色就是margin外边距
4、给上面的div加边框，修改后代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>he</title> <style> div{ margin:15px; width:200px; height:300px; background-color:red; border:solid 10px black } </style></head><body> <div> </div></body></html>
5、在浏览器查看效果，黑色的就是边框，边框的宽度相当于增加原来div的厚度，不会影响外边距
6、增加内边距，修改代码如下：<!DOCTYPE html><html lang="en媪青怍牙"><head> <meta charset="UTF-8"> <title>he</title> <style> div{ margin:15px; width:200px; height:300px; background-color:red; border:solid 10px black; padding:20px } </style></head><body> <div> </div></body></html>
7、内边距会占用div的空间，紧按着边框
8、在div中输入简单的内容，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>he</title> <style> div{ margin:15px; width:200px; height:300px; background-color:red; border:solid 10px black; padding:20px } </style></head><body> <div> 我是内容 </div></body></html>
9、在浏览器查看效果，内容会在内边距里边，这就是简单的盒模型实例，是网页设计必须掌握的基本功
