<div class="box1">盒子模型,假如style中没设置宽高，则盒子的大小跟着文字的多少变动，所以要设置内外边距，padding的各种值，
1、如果padding的值是一个值，那么代表上下左右内边距都相同，padding：10px；
2、如果有两个值，则第一个代表值上下内边距，第二个值代表左右；padding：10px 20px；
3、如果有三个值，第一个值代表上，第二个值代表左右，第三个值代表下；padding：10px 20px 10px；
4、如果有四个值，第一个值上，第二个值右，第三个值下，第四个值左；padding：10px 20px 10px 30px；顺时针记忆
5、单独定义某一个内边距，如只调左内边距，padding-left:200px;调其他单边同理left right top bottom。
排后面的值会覆盖前面的值，
原来box盒子是500px，加上padding左右是20px后，整个盒子的宽会变成540px，所以加padding后要在width剪掉padding所占的值，即width应为460px！
</div>
<div class="box2">盒子模型,假如style中没设置宽高，则盒子的大小跟着文字的多少变动，所以要设置内外边距，padding的各种值，
1、如果padding的值是一个值，那么代表上下左右内边距都相同，padding：10px；
2、如果有两个值，则第一个代表值上下内边距，第二个值代表左右；padding：10px 20px；
3、如果有三个值，第一个值代表上，第二个值代表左右，第三个值代表下；padding：10px 20px 10px；
4、如果有四个值，第一个值上，第二个值右，第三个值下，第四个值左；padding：10px 20px 10px 30px；顺时针记忆
5、单独定义某一个内边距，如只调左内边距，padding-left:200px;调其他单边同理left right top bottom。
排后面的值会覆盖前面的值，
原来box盒子是500px，加上padding左右是20px后，整个盒子的宽会变成540px，所以加padding后要在width剪掉padding所占的值，即width应为460px！
上下左右外边距：margin:30px，左右上下与padding同样，不同的是margin外边距不会改变盒子的大小
</div>
<div class="box3">盒子模型,假如style中没设置宽高，则盒子的大小跟着文字的多少变动，所以要设置内外边距，padding的各种值，
1、如果padding的值是一个值，那么代表上下左右内边距都相同，padding：10px；
2、如果有两个值，则第一个代表值上下内边距，第二个值代表左右；padding：10px 20px；
3、如果有三个值，第一个值代表上，第二个值代表左右，第三个值代表下；padding：10px 20px 10px；
4、如果有四个值，第一个值上，第二个值右，第三个值下，第四个值左；padding：10px 20px 10px 30px；顺时针记忆
5、单独定义某一个内边距，如只调左内边距，padding-left:200px;调其他单边同理left right top bottom。
排后面的值会覆盖前面的值，
原来box盒子是500px，加上padding左右是20px后，整个盒子的宽会变成540px，所以加padding后要在width剪掉padding所占的值，即width应为460px！
</div>
</body>
</html>
