二． 盒子模型属性
1. 边框（border）：
用于分隔不同元素、会占据空间、有4条边框、可无边框（设置为0）。
语法:
border : border-width || border-style || border-color
取值:
该属性是复合属性。默认值为： medium none 。 border-color 的默认值将采用文本颜色。
边框属性简写:
同时设置边框的三个属性：border: 3px solid blue;
示例代码1：边框属性简写
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>边框属性简写</title>
<style>
div{
width: 200px;
height: 200px;
border: 3px solid blue;
}
</style>
</head>
<body>
<div>盒子</div>
</body>
</html>
border-width：设置对象边框的宽度。
语法：
border-width : medium | thin | thick | length
取值： medium : 默认值。默认宽度 thin : 小于默认宽度 thick : 大于默认宽度 length : 由浮点数字和单位标识符组成的长度值。不可为负值。
说明： 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框（顺时针）。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上－下，第二个用于左－右。 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 设置border-width、border-color前要设置border-style。
分别设置四条边框：
| 属性 | 语法规则 | 说明 |
|---|---|---|
| border-top-width | border-top-width:5px; | 上边框粗细为5px |
| border-right-width | border-right-width:10px; | 右边框粗细为10px |
| border-bottom-width | border-bottom-width:8px; | 下边框粗细为8px |
| border-left-width | border-left-width:22px; | 左边框粗细为22px |
示例代码2:分别设置四条边框（修改示例代码1的style）
div{
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
width:200px;
height:200px;
border-style: solid;
}
同时设置4条边框：
| 属性 | 语法规则 | 说 明 |
|---|---|---|
| border-width | border-width:5px; | 4条边框粗细均为5px |
| border-width | border-width:20px 2px; | 上、下边框粗细为20px,左、右边框粗细为2px |
| border-width | border-width:5px 1px 6px; | 上边框粗细为5px,左、右边框粗细为1px,下边框粗细为6px |
| border-width | border-width:1px 3px 5px 2px; | 上边框粗细为1px,右边框粗细为3px,下边框粗细为5px,左边框粗细为2px |
示例代码3:同时设置4条边框（修改示例代码1的style）
div{
border-width:5px 10px 20px;
width:200px;
height:200px;
border-style: solid;
}
border-color: 指定颜色。
语法： border-color : color
取值： color:指定颜色。附：CSS 颜色十六进制值表
说明：
- 从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）：第1组为红色，第2组为绿色，第3组为蓝色。根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。
- 数值大颜色亮
- 十六进制值是成对重复的可以简写，效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。
- 红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000，要记住（上面所提到的都是饱和色）。
分别设置四条边框和同时设置4条边框语法同border-width
示例代码4:同时设置4条边框的颜色（修改示例代码3的style）
div{
border-color: gold pink blue red;
border-width:5px 10px 20px;
width:200px;
height:200px;
border-style: solid;
}
border-style：设置对象边框的样式。
语法： border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
取值：
none : 默认值。无边框。不受任何指定的 border-width 值影响
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画3D凹槽
ridge : 根据 border-color 的值画3D凸槽
inset : 根据 border-color 的值画3D凹边
outset : 根据 border-color 的值画3D凸边
分别设置四条边框和同时设置4条边框语法同border-width
示例代码5:同时设置4条边框（修改示例代码4的style）
div{
border-style: dotted;
border-color: gold pink blue red;
border-width:5px 10px 20px;
width:200px;
height:200px;
}
inherit：规定应该从父元素继承 border 属性的设置。
注:当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。
2. 填充(padding)：
用于控制内容与边框之间的距离；会占据空间； 可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。
分别设置4个方向的内边距：
| 属性 | 语法规则 | 说明 |
|---|---|---|
| padding-left | padding-left:10px; | 左内边距为10px |
| padding-right | padding-right:5px; | 右内边距为5px |
| padding-top | padding-top:20px; | 上内边距为20px |
| padding-bottom | padding-bottom:8px; | 下内边距为8px |
同时设置4个方向的内边距：
| 属性 | 语法规则 | 说明 |
|---|---|---|
| padding | padding:10px ; | 设置4个方向内边距均为10px |
| padding | padding:10px 5px; | 上、下内边距为10px,左、右内边距为5px |
| padding | padding:30px 8px 10px ; | 上内边距为30px,左、右内边距为8px,下内边距为10px |
| padding | padding:20px 5px 8px 10px ; | 上内边距为20px,右内边距为5px,下内边距为8px,左内边距为10px |
示例代码6:同时设置4个方向的内边距
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>填充(padding)</title>
<style>
#box1{
width: 400px;
height: 300px;
background: pink;
}
#box2{
padding: 30px 8px 10px;
width: 300px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">同时设置4个方向的内边距</div>
</div>
</body>
</html>
3. 边界(margin)：用于控制元素与元素之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。
分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。
示例代码7:同时设置4个方向的外边距
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>边界(margin)</title>
<style>
#box1{
border:1px solid red;
width: 400px;
height: 300px;
background: pink;
}
#box2{
margin: 10px 30px;
padding: 30px 8px 10px;
width: 300px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">同时设置4个方向的外边距</div>
</div>
</body>
</html>
注：body的外边距，本身是一个盒子，默认情况下，有若干像素外填充。 由于各个浏览器存在着默认的内外边距值且不相同，我们需要将所有浏览器的默认内外边距，都从0计算。 所以，我们用
body,div{/*清除默认外边距和内边距*/
margin: 0;
padding: 0;
}
去除浏览器的默认内外边距。建议要去除的写上，不建议使用*{margin:0;padding:0;}。
示例代码8:去除body外边距
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>去除body外边距</title>
<style>
body,div{
margin: 0px;
padding: 0px;
}
div{
border:1px solid red;
width: 400px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div id="box">此时是贴在body边框上</div>
</body>
</html>
效果：
图4 去除body外边距
4. 内容(content)
内容本身的宽=width 内容本身的高=height
5. 盒子模型总尺寸
盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）
图5 盒子模型总尺寸