CSS 宽高的计算

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小于设备宽。