【CSS深入】不同块级流方向时的百分比计算 - 编程人生
百分比在屏幕自适应是我们常用，但是很多时候某个CSS属性的百分比计算值，并非如我们所想象的那样子。前段时间有位同学分享了一篇关于margin/padding自适应布局的文章，看完后我去w3.org查了下margin和padding百分比计算的注意事项，描述如下：
Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).[1]
Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).[2]
水平流？垂直流？那是甚么鬼？之前我一直不明白这两者何意，直到最近看CSS权威指南，讲到direction的时候提到了CSS Writing Modes Level 3里的writing-mode，查了官方文档后才知道，CSS3以后就有了定义内容书写方向的规范。
什么是块级流方向
简言之，块级流方向就是块级盒子在块级格式化上下文中以何种方向来进行顺序排列。这里要注意的一点是对于英文（也是简体中文）这种从上至下从左至右书写的语言，writing-mode和direction分别会被默认设为horizontal-tb和ltr。另外在CSS权威指南P171有提到，我们常见的margin的初始值是0，但是我们看到的大都是靠在左上方的，因为在英文语言的书写顺序、也就是块级流方向下，margin-right和margin-bottom被默认强制设为auto了。如果不明白这些默认的强制格式化属性规范，很多时候我们做出来页面的效果可能会有点不合本意。这时我才渐渐意识到文本语言码识别lang和字符码识别charset在多语言情境下的重要性，另外关于FBC的内容还我也还未深入了解（这里挖个坑，以后填），请参看参考目录部分。
如何设置块级流方向
direction属性只是影响的行内类型内容的书写方向，而writing-mode则是可以直接影响块级元素的布局。horizontal-tb是我们常用页面的默认设定，决定了内容的水平方向书写和块级流方向的从上往下推进；vertical-rl和vertical-lr则是部分语言的书写方向，这两个属性值决定了内容的垂直方向书写以及块级流方向分别是从右往左推进和从左往右的推进，比如，古汉字应用中最常见的是圣旨是从右向左推进、从上往下书写的，现代的日语也有这种格式的。
对百分比计算的影响
参考
《CSS权威指南（第三版）》
CSS basic box model
CSS Writing Modes Level 3
Visual formatting model
详说 Block Formatting Contexts (块级格式化上下文) | Kayo's Melody