6.2 盒子模型的多方向设置
6.2.1 分别设置4个方向的值
CSS代码
div {
width: 220px;
height: 80px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #0aaa76;
border-right: 20px solid #ed7d31;
border-bottom: 30px solid #4aa6fc;
border-left: 40px solid #666;
}
border-top是一个复合属性，包含三个属性border-top-width、border-top-style、border-top-color，可以一次设置相应3个值。
运行效果
padding各方向与margin各方向的值设置距离即可，示例如下。
div {
width: 100px;
height: 80px;
border: 2px solid #0aaa76;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 35px;
margin-left: 45px;
}
6.2.2 仅设置border的1个方向的值
分别仅设置上方与左方的线。
<body>
<div style="border-top:2px solid #0aaa76;">小步教程 xiaobuteach.com</div>
<div style="border-left:2px solid #4aa6fc;">小步教程 xiaobuteach.com</div>
</body>
运行效果
实际项目中，横线与竖线一般通过border实现。
6.2.3 padding/margin设置不同个数
案例设计说明。div默认display:block表示会占满整行宽度，当内部文本宽度较小时，内容区本身就存在空白，对于观察padding-right效果不明显。所以特意设计内部内容出现换行且换行处不出现英文单词，则padding-right效果明显。
（1）padding设置1个值。这1个值同时对应4个方向：padding-top、padding-bottom、padding-left、padding-right。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body {
margin: 0;
}
.div1 {
width: 200px;
border: 2px solid #0aaa76;
padding: 20px;
/* padding:10px 20px 30px 40px; */
/* padding:20px 30px; */
/* padding:20px 30px 40px; */
}
</style>
</head>
<body style="margin: 0;">
<div style="width: 200px; border:2px solid #0aaa76;padding:20px;">
xiaobuteach.com 小步教程小步教程
</div>
</body>
</html>
运行效果
查看盒子尺寸
（2）padding设置4个值。从顶部开始，按顺时针进行对应：第1个值对应 padding-top，第2个值对应 padding-right，第3个值对应 padding-bottom，第4个值对应 padding-left。
padding:10px 20px 30px 40px;
查看盒子
（3）padding设置2个值。第1个值同时对应垂直方向的padding-top与padding-bottom；第2个值同时对应水平方向的padding-left与padding-right。
padding:20px 30px;
查看盒子
（4）padding设置3个值。第1个值对应padding-top；第2个值同时对应垂直方向的padding-left与padding-right；第3个值：对应padding-bottom。
padding:20px 30px 40px;
查看盒子
6.2.4 padding/margin个数规律
盒子模型数值顺序的设计非常巧妙。
（1）当4个值时，从顶按顺时针方向对应。
（2）便于追加。假设开发时不断往后追加个数，原有值表示的初始位置值始终不变。
padding:10px;
padding:10px 20px ;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
上述四种情况，padding-top始终是10px，无论后面几个值；同理，只要存在第2个值20px，无论后面几个值，则padding-right始终是20px，无论后面几个值。
（3）从覆盖角度理解。下面内容表示：当设置不同个数时，括号内表示默认设置的值。
a (a a a) 所有方向重复第1个值a。
a b (a b) 第2个值b作为垂直方向覆盖top与bottom方向值。
a b c (b) 第3个值c覆盖right方向值。
