margin的值类型有:auto | length | percentage
percentage:百分比是由被应用box的containing block
margin的默认值为0,并且margin支持负值。
margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,按顺时针的顺序围绕元素。
表达式如下:
margin:top right bottom left;
四个数值中间以空格分隔。效果等同于:
margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;
省略的数值写法,基本原则如下:
引用:
1.如果没有left值,则使用right代替;
2.如果没有bottom值,则使用top代替;
3.如果没有right值,则使用top值代替。
根据这些基本原则,我们可以有三种省略方式,但不管怎样省略margin的数值都会大于等于一个,而margin的默认数值是从top开始至left结束,那么对于省略的具体情况,我们可以从left反推理回去。
1.如果margin只有三个值,按照值的顺序为margin:top right bottom; 缺少了left,根据原则,则left的值有right来代替。
margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
2.如果margin只有两个值,按照值的顺序为margin:top right; 缺少了bottom和left,根据原则left的值由right来代替,bottm的值由top来代替。
margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
3.如果margin只有一个值,按照值的顺序为margin:top; 缺少了bottom、left和right,其它值全部由top来代替。
margin:10px; 就等于 margin:10px 10px 10px 10px;
实战演习:
<div class="A">
<div class="B"></div>
</div>
B在A的布局内的相对排版位置:
.A{ display:flex; } /* 重要:display必须是flex弹性布局才有效 */
左右居中对齐: .B{ margin:0 auto; }
垂直居中对齐: .B{ margin:auto; } 或者 .B{ margin:auto auto; }
左上角对齐: .B{ margin:0 auto auto 0; }
左下角对齐: .B{ margin:auto auto 0 0; }
右上角对齐: .B{ margin:0 0 auto auto; }
右下角对齐: .B{ margin:auto 0 0 auto; }
靠左对齐垂直居中: .B{ margin:auto auto auto 0; }
靠右对齐垂直居中: .B{ margin:auto 0 auto auto; }