在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
下面的图片说明了盒子模型(Box Model)：
width和height
width:width属性设置元素的宽度
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
height:height 属性设置元素的高度
这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性
Margin(外边距) - 清除边框外的区域，外边距是透明的。
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子属性</title>
<style>
#div1 {
width: 300px;
height: 300px;
margin: 50px ;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="div1">演示代码gauss</div>
</body>
</html>效果如下：
边框与页面的距离就是外边距
Border(边框) - 围绕在内边距和内容外的边框。
盒子的边框多种多样，你可以选择自己喜欢的类型来装饰你的网页设计
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子属性</title>
<style>
#div1 {
width: 300px;
height: 300px;
margin: 50px ;
padding: 50px;
border: 5px red;
border-style: inset ;
}
</style>
</head>
<body>
<div id="div1">演示代码gauss</div>
</body>
</html>效果如下：
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子属性</title>
<style>
#div1 {
width: 300px;
height: 300px;
margin: 50px ;
border: 2px solid red;
padding: 50px;
}
</style>
</head>
<body>
<div id="div1">演示代码gauss</div>
</body>
</html>效果如下：
