height作用细节

2022-04-06  本文已影响0人  skoll

height:auto

1 .css流默认是水平方向的,宽度是稀缺的,高度近乎是无限的.因此宽度的分配规则比较复杂,高度就比较随意
2 .height:auto的规则就是从一行里面的盒子选用一个最高的,最高的就是最终的高度值了
3 .height:auto也有格式化高度的问题,可以参考格式化宽度的细节

height:100%

1 .对于width属性,就算父元素width为auto,百分比也支持,但是在height里面,如果父元素height:auto,只要子元素在文档流中,百分比值就失效。
2 .也就是说在普通文档流中,想要高度百分比生效,父级必须有一个可以生效的高度值

1 .如果包含块的高度没有显示指定,并且该元素不是绝对定位,则计算值为auto.因为是auto,auto和百分比是计算不了的
2 .width的话,如果宽度是auto,但是等渲染到子元素的时候,真实的宽度已经计算出来了

如何让元素支持height:100%

1 .设定显示的高度值

body,html{
  height:100%
}

2 .使用绝对定位

div{
  height:100%,
  position:absolute;
}

3 .使用绝对定位的百分比计算和非绝对定位元素的百分比计算有区别。绝对定位的宽高百分比是相对于padding box,会把padding计算到里面。非绝对定位是根据content box计算的
4 .https://demo.cssworld.cn/3/2-11.php

上一篇 下一篇

猜你喜欢

热点阅读