【CSS深入】不同块级流方向时的百分比计算_html/css_WEB-ITnose

百分比在屏幕自适应是我们常用，但是很多时候某个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]

水平流？垂直流？那是什么鬼？