开发者学堂课程【零基础学前端 HTML+CSS ：盒子模型属性和默认值编写】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5141
盒子模型属性和默认值编写
内容介绍：
一、CSS 盒子嵌套
二、边框 border 属性
三、盒子模型的特性
四、属性值的简写形式
五、各种元素盒子属性的默认值
一、CSS 盒子嵌套
如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值＋里面盒子的边界值
二、边框 border 属性
盒子模型的 margin 和 padding 属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。
分别是 border-width（宽度)、border-color （颜色)和border-style (样式)其中border-style属性可以将边框设置为实线( solid )、虚线( dashed )、点划线( dotted )和双线( double )等效果
（1）若输入如下代码：
#a1 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
#a2 {
width: 200px;
height: 200px;
background-color : gray;
}
a3 {
width: 200px;
height: 200px;
background-color:red;
border: 2px red solid;
padding20px;
margin: 20px;
}
则得到结果：
（2）若输入如下代码：
#a1 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
#a2 {
width: 200px;
height: 200px;
background-color : gray ;
}
#a3{
width: 200px;
height: 200px;
background-color: red;
border: 2px red solid;
padding: 20px;
}
</ style></head>
<body>
则得到结果：
（3）若输入如下代码：
#a1 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
#a2 {
width: 200px;
height: 200px;
background-color : gray ;
padding: 20px;
}
#a3{
width: 200px;
height: 200px;
background-color: red;
border: 2px red solid;
padding: 20px;
}
</ style></head>
<body>
则得到结果：
三、盒子模型的特性：
边界值 margin 可为负，填充 padding 不可为负
边框 border 默认值为0，即不显示
行内元素，如a，定义上下边界不影响行高
边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距离 margin，填充距离 padding 和边框值 border
四、属性值的简写形式：
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：
（1）如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性;
（2）如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性;
（3）如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。
例如 h1 {margin : 10px 0px 15px 5px;}
五、各种元素盒子属性的默认值
（1）大部分 html 元素的盒子属性(margin,padding)默认值都为0;
（2）有少数 html 元素的(margin, padding)浏览器默认值不为0，例如: body , p , ul , li , form 标记等，因此我们有时有必要先设置它们的这些属性为0。
（3）Input 元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。
注意：各种属性起始都有默认值，如果你的网站有空白的边说明填充和间距不为0，需要手工设置初始化 CSS.
