开发者学堂课程【零基础学前端HTML+CSS：盒子模型属性介绍 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5140
盒子模型属性介绍
内容介绍：
一、前端开发
二、实际操作
一、前端开发
标准盒子模型图
1.盒子模型边距填态边框介绍：
盒子模型可以单独设置任何一个元素，也可以组合起来编写。
上、右、下、左可以分开来写。一个盒子有内容、填充、边框和边距组成。
2.元素盒子大小的计算：
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界
3.现实生活的盒子模型：
月饼盒子
二、实际操作：
总结盒子大小，需要把所有占宽度的属性都计算。
（1）新建 divbox1:
1<!DOCTYPE htm1>
2<htm1>
3<head lang="en">
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body>
8div id="a1">盒子1</div>
10<div id=" a2">盒子2</div>
13<div id="a3">盒子3</div>
14</body>
得到结果如下：
盒子1
盒子2
盒子3
（2）在页面中加入如下字符：
#a1 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
#a2 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
#a3{
width: 200px;
height: 200px;
background-color: aquamarine;
}
得到结果为：
（3）做如下改变：
#a1{
width: 200px;height: 200px;
background-color: aquamarine;
padding: 20px;
}
则得到
（4）做如下改变：
#a1{
width: 200px;height: 200px;
background-color: aquamarine;
padding: 20px;
border: 20px;
margin: 20px;
}
则得到结果：
