18910140161

CSS 宽高的计算

顺晟科技

2022-09-13 13:13:09

261

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

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航