你不知道的css:width与height,到底是如何做计算的。
元素的width、height属性
本文介绍width与height属性的 1⃣️默认值 和 2⃣️显式设置百分比 情况下的计算方法。
1⃣️默认值:
以下情况会默认“继承”直接父元素的,无需显式设置width/height值:
- 无float和position的且是block的元素;
若非上述情况且不显式设置宽高,则为缺省,即width/height:auto,随内容的宽高度而变化。
2⃣️显式设置百分比:
否则,接下来需要显式设置width/height值。分为固定单位和百分比单位,当width/height显式设置为百分数时,它的计算规则是什么呢:
- 标准流中的元素:相对于直接父元素进行计算;
- 有float的元素:相对于直接父元素进行计算;
- 有position的元素:
position:relative 相对于直接父元素进行计算;
position:absolute 相对于最近一层有position的父元素,直到相对body
position:fixed 相对于body。
注意:body元素默认高度是没有的;默认宽度是页面的宽度