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; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。