补白（padding），边框（border）,边界（margin）四个方向属性省略的数值写法，基本原则如下：
1.如果没有left值，则使用right代替；
2.如果没有bottom值，则使用top代替；
3.如果没有right值，则使用top值代替。
根据这些基本原则，可以有三种省略方式，但不管怎样省略margin的数值都会大于等于一个，而margin的默认数值按顺时针排列：top->right->bottom->left。那么对于省略的具体情况，我们可以从left反推理回去。
a.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值有right来代替。
margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;
b.如果margin只有两个值，按照值的顺序为margin：top right; 缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。
margin:10px 20px;就等于margin:10px 20px 10px 20px;
c.如果margin只有一个值，按照值的顺序为margin:top; 缺少了bottom、left和right，根据原则left的值由right来代替，bottom的值由top来代替，right的值右top来代替，也就是说left的值也由top来代替。
margin:10px;就等于margin:10px 10px 10px 10px;
margin参数值包括margin-top,margin-right,margin-bottom,margin-left
margin: 50px -50px -50px 50px; /*上右下左边界分别为50px、-50px、-50px、50px*/
这是怎么移动的呢，这跟参考线有关。
何谓参考线？参考线就是margin移动的基准点，此基准点相对于box盒（这里的box指与div-margin相邻或周边的盒）是静止的。而margin的数值，就是box盒相对于参考线的位移量。在margin中top、right、bottom 、left的参考线分为两类。top、left为一类参考线，right、bottom为另一类参考线。
top以box的内线为参考线垂直向下位移；bottem以box的外线为参考线垂直向下位移；
left以box的内线为参考线水平向右位移；right以box的外线为参考线垂直向下位移；
上面的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。
一大推文字看着累，看示例吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> margin 解析 </TITLE>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
#box {
background-color: #ff0;
height: 300px;
width: 300px;
margin: 20 auto;
border-style: dashed;
border-width: 5px;
border-color: #f00 #30c #30c #f00;
}
#kuang {
background-color: #eee;
height: 200px;
width: 200px;
margin: 50px -50px -50px 50px;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="kuang"></div>
</div>
</body>
</html>
margin 属性解析
margin: 50px -50px -50px 50px;
根据上面解释的margin解析，kuang的上边界以box的内线为参考线垂直下移50px;下边界以box的外线为参考线垂直上移50px；右边界以box的外线为参考线水平向左移50px；左边界以box的内线为参考线水平向右移50px；
最新评论