css中margin属性值百分比的使用

margin使我们使用得很频繁的一个属性，用来设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，可以有 1 到 4 个值。例子：margin:10px 5px 15px 20px;
说明：

属性值	描述
auto	浏览器计算外边距
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的外边距
inherit	规定应该从父元素继承外边距

值得注意的是属性值为百分比时的边距是基于父元素的宽度来计算的，有如下两个DIV：

依照属性描述，得出的上、右、下、左边距都是400x10%=40px，结果也是如此：

想象中margin-top和margin-bottom应该与包含元素的高度关联，而margin-left和margin-right才应该与包含元素的宽度关联。经查阅，这与页面默认的书写模式writing-mode有关。默认情况下writing-mode的值为 horizontal-tb，即水平书写方式。当把书写模式修改为纵向的时候，margin-top/bottom/left/right的百分比值都将会以包含元素的高度为参照，即200x10% = 20px。

造成这种现象的原因其实更多的要从css的设计意图上去想，因为css的基础需求是排版，而我们通常所见的横排文字，它的水平宽度一定（实际写页面时，如果没有定义元素宽度或者强制一行显示，文字都会在遇到边界时换行，而不是水平延展），而垂直方向可以无限延展。但在将书写模式修改为纵向的时候，其参照就变成了高度而不再是宽度了。

writing-mode：属性定义了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

• horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
• vertical-lr：垂直方向内内容从上到下，水平方向从左到右
• sideways-rl：内容垂直方向从上到下排列
• sideways-lr：内容垂直方向从下到上排列

演示效果：

兼容性：