当前位置: 首页 > Web前端 > CSS

CSS中的百分比

时间:2023-03-30 15:08:15 CSS

结论:对于标准流程中的元素,看其属性是否继承。对于width和margin-left,是可以继承的,它会引用父元素或者祖先元素(实际包含块);对于height,它没有继承,父元素或者祖先元素会适配它所有的子元素的高度和(这个需要注意)。绝对定位是指其最近的父元素或祖先元素。如果没有父元素或祖先元素,那么它指的是初始包含块(不同的浏览器可能不同,因为W3C没有规定浏览器如何实现它)。但实际上,大多数浏览器将视口视为绝对定位的包含块。固定定位参考可视区域的宽度设置为百分比。一般情况下,子元素通常会继承父元素计算出的值作为百分比参考。对于不可继承的属性和根元素,使用初始值作为参考。比如.box没有设置宽度,但是默认继承body计算的值,而因为.box是.item的父元素,所以.item继承.box计算的值。当块级元素没有设置宽度时,它的宽度默认为全屏,因为它继承了包含块的宽度。当高度设置为百分比结论时,当高度设置为百分比时,高度不会像宽度一样继承父元素或祖先元素。相反,父元素或祖先元素会根据子元素的实际高度(高度计算值)自行适配,一般为所有子元素元素内容的高度之和。子元素会根据文本行的高度设置一个具体的高度值(在子元素的高度没有设置具体值的情况下)。对于绝对定位的元素,当它的高度是百分比时,会参考父元素或祖先元素的高度。绝对定位是指最近的父元素或祖先元素。如果没有父元素或祖先元素,那么引用就是初始的Include块(不同的浏览器可能不同,因为W3C没有规定浏览器应该如何实现)。但实际上,大多数浏览器将视口视为绝对定位的包含块。我们一般喜欢以百分比的形式设置宽度,但是在以百分比形式设置高度时要小心。height100为什么%

html的高度等于21?这个21是继承自祖先元素吗?当我们将body的高度设置为100%时,结果还是一样的。其实这里的高度就是行高的高度,也就是说当高度为0或者没有设置高度时,高度就是文字的行高。当我们添加line-height:20px;.box,box,body和html的高度都会变成20px;当我们将.box的高度设置为特定值时:height100%
可以发现body和html都是100px,和.box的高度一样。所以可以得出结论,父元素在不设置高度的情况下,自适应子元素的高度(在不设置高度的情况下,html和body的高度是所有的高度content),如果设置了父元素的高度,则另一种情况:height
可以发现d,body,html的高度变成了100px(本来应该是200px),表示父元素或祖先元素被动自适应子元素的高度,它们的高度值不会被继承当self元素有绝对定位时1.祖先元素没有定位的绝对定位这时候绝对定位指的是一个viewport的高度,注意viewport的概念。height100%将高度分别改为100%和50%,可以发现html的高度为0,没有自适应div高度,因为div已经完全偏离标准流程了,我们说如果绝对定位没有定位的祖先元素,那么包含块就是初始包含块,这里的初始包含块就是可见区域,所以这里的百分比是参考可见区域的大小计算。所以在50%时,它占据了一半的视口。注意这只是视口的高度,下拉滚动条即可。2.绝对定位元素在另一个定位元素内(静态除外)。此时的百分比指的是父元素生成的包含块计算出来的值。所以如果想让定位元素的高度充满整个屏幕,可以:body{position:relative;}margin-left设置为百分比margin-left此时出现滚动条是因为div的margin-left设置为100%,百分比是指宽度它的包含块主体,这又是引用的html(某些浏览器将其视为初始包含块)。html的初始包含块是可见区域,所以可见区域的宽度加上元素的100%自然就超过了屏幕。解决方法:(1)使用calc函数margin-left(2)body的宽度减去100px,因为div的百分比是根据其父元素的宽度计算的,所以如果这里它的父元素的宽度变小,那么它的100%的margin-left自然会变小左边距