height和margin的计算

计算 \’top\’, \’margin-top\’, \’height\’, \’margin-bottom\’, and \’bottom\’ 的时候。需要对不同类型的盒子进行区分。

1.inline, non-replaced elements
2.inline, replaced elements
3.block-level, non-replaced elements in normal flow
4.block-level, replaced elements in normal flow
5.floating, non-replaced elements
6.floating, replaced elements
7.absolutely positioned, non-replaced elements
8.absolutely positioned, replaced elements
9.\'inline-block\', non-replaced elements in normal flow
10.\'inline-block\', replaced elements in normal flow

行内，非替换元素

\’height\’属性不起作用。内容区域的高应该基于字体。
行内非替换元素的竖直的padding，border，margin在内容区域的上面和下面开始，和‘line－height’没有影响。只有‘line－height’用来计算行框的高。

行内可替换元素，自然流中的可替换块级元素，自然流中的可替换行内块和浮动可替换元素

如果，\’margin-top\’,\’margin-bottom\’值是\’auto\’,使用值是0

如果\’height\’,\’width\’都是\’auto\’并且元素有固有的高度。那么固有的高度就是使用的高度。

否则：如果高是auto，元素有固有的比率。那么使用的高是：

（used width）/( intrinsic ratio)

否则：元素的高设置为最大的符合比例2:1,高小于150，width小于设备宽。

版权声明：本文为diaoxiong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/diaoxiong/p/5685701.html