盒模型是指：html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。
盒模型的属性
1、边框
一般用于分隔不同的元素，边框的外围即为元素的最外围。边框是围绕元素内容和内边距的一条或多条线。border属性允许规定元素边框的宽度、颜色和样式。
| none | 无边框，与任何指定的border-width值无关 |
| dotted | 边框为点线 |
| dashed | 边框为短线 |
| solid | 边框为实线 |
| double | 边框为双线，两条单线与其间隔的和等于指定的border-width 值 |
| groove | 根据 border-color的值画 3D凹槽 |
| ridge | 根据border-color的值画菱形边框 |
| inset | 根据border-color的值画 3D凹边 |
| outset | 根据border-color的值画 3D凸边 |
<head>
<style>
#div1{
border: 2px black solid;
}
#div2{
border: 2px red solid;
}
</style>
</head>
<body>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
</body>
2、外边距和内边距
外边距（margin）即盒子与盒子的边距，内边距（padding）即盒子内的元素和盒子之间的边距。
| margin-top :length | auto | 上外边距 |
| margin-right :length | auto | 右外边距（可以是负值） |
| margin-bottom :length | auto | 下外边距 |
| margin-left :length | auto | 左外边距（可以是负值） |
| margin:length | auto | 外边距 |
内边距属性与外边距属性相同，这里就不列举了。但是各种元素盒子属性的默认值不尽相同，具体区别如下：
(1)大部分html元素的盒子属性(margin、padding)默认值都为0。
(2)有少数html元素的盒子属性(margin、padding)在浏览器解析时的默认值不为0。例如<body>、<p>、<ul>、<li>、<form >标签等,有时有必要先设置它们的这些属性为0。
(3)<input>元素的边框属性默认不为0,可以设置为0,达到美化输入框和按钮的目的。
<head>
<style>
#div1{
border: 2px black solid;
margin: 200px;
padding: 20px;
}
#div2{
border: 2px red solid;
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
</body>
3、盒子的大小
一般我们通过定义盒子的宽度和高度去定义盒子的大小。
<head>
<style>
#div1{
border: 2px black solid;
margin: 200px;
padding: 20px;
width: 200px;
height: 50px;
}
#div2{
border: 2px red solid;
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
</body>
标签：盒子,solid,border,模型,边框,padding,margin,属性 From： https://blog.csdn.net/wp2890326585/article/details/142927028