CSS margin百分比

之前一直没有注意到：margin取百分比的时候到底是根据什么值来取的百分比。其实这应该算是非常基础的一个问题了，现在想想自己觉得已经会用一些框架了，也能切除好看的页面了，就沾沾自得的心态是非常不可取的。

那么，今天写的这篇博文就从一个问题开始吧。

假设一个块级的父元素的margin值为800x 600px，那么当块级的子元素设置margin为10% 5%的时候，margin-top、margin-right、margin-bottom、margin-left的值分别是多少呢？

下面让我们在实际的HTML代码中尝试一下：

CSS：

#demo {
  width: 800px;
  height: 600px;
  background: #2E8B57;
}
#box {
  margin: 10% 5%;
  background: #9370DB;
}

HTML：

<div id="demo">
	<div id="box">test</div>
</div>

实际运行出来告诉我们结果是：80px 40px 80px 40px。

那么为什么是这个结果呢？

规范中注明margin的百分比值参照其包含块的宽度进行计算。

但这是发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下。

当书写模式变成纵向的时候，其参照将会变成包含块的高度。我们改变一下上面例子中的CSS书写模式：

CSS:

#demo{
	writing-mode: vertical-rl;
}

就会发现，结果变成了60px 30px 60px 30px，也就是参照父元素的高度来实现的。