浅谈CSS中的百分比

网页制作 2024/11/23 佚名

3 2 1

本文介绍了浅谈CSS中的百分比，分享给大家，具体如下：

结论：

标准流中的元素，看其属性有没有继承性。对于width和margin-left，它是可以继承的，它会参照父元素或者祖先元素（其实是包含块）；对于height，它没有继承性，父元素或者祖先元素会自适应其所有子元素的高度和（这点是需要注意的）。
绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体如何去实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。
固定定位参照可视区

width设置成百分比

一般子元素通常将继承父元素计算过的值当作百分比的参照，对于不可继承的属性和根元素，则使用初始值作为参照

比如.box没有设置宽度，但默认继承了body计算过的值，又因为.box是.item的父元素，因此.item又继承了.box计算过的值。当一个块级元素不设置宽度时，则它的宽度默认为全屏，就是因为它继承了包含块的宽度。

height设置成百分比

结论

高度设置成百分比时，高度不像宽度一样会继承父元素或者祖先元素，相反，父元素或者祖先元素会根据子元素的实际高度（高度计算值）来自适应，一般为所有子元素的内容加起来的高度和。而子元素会根据文字行高来设置高度具体值（在子元素高度不设置具体值的情况下）。对于有absolute定位的元素，其高度为百分比时会参照父元素或祖先元素的高度，绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块（不同的浏览器可能不一样，因为W3C没有规定浏览器具体要如何实现）。但实际上，大部分浏览器将可视区当作绝对定位的包含块。

我们一般喜欢将宽度设置成百分比，但在将高度设置成百分比的时候要注意。

 <style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            width:100px;
            height:100%;
            background-color: #58d3e2;
        }
    </style>
<div class="box">height 100%</div>

html为什么会出现height等于21呢？是不是这21是从祖先元素继承过来的？当我们把body的高度设置成100%结果还是一样。其实这里的高度为行高的高度，也就是说，在高度为0或者不设置高度的情况下，高度是文字的行高，当我们在.box中加上line-height:20px;时，box,body和html的高度都会变成20px;当我们把.box高度设置成具体值时：

 <style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            width:100px;
            height:100px;
            background-color: #58d3e2;
        }
    </style>
<div class="box">height 100%</div>

可以发现，body和html竟然跟.box高度一样为100px.所以可以得出父元素在不设置高度的情况下，是自适应子元素高度的（在不设置高度的情况下，html和body的高度是所有内容加起来的高度），如果父元素设置了高度，则是另外一种情况了:

 <style>
        body,div{
            margin:0;
            padding:0;
        }

        .d{
            height: 100px;
            width: 200px;
            background-color: #9d9d9d;
        }
        .box{
            width:100px;
            height:100px;
            background-color: #58d3e2;
        }
    </style>
<div class="d">
<div class="box">height</div>
</div>

可以发现d,body,html的高度都变成了100px(本来应该是200px),说明父元素或祖先元素时被动自适应子元素高度的，它们的高度值不会继承给自元素。

当有absolute定位时

1.绝对定位没有定位的祖先元素

这时绝对定位参照的是一个视口的高度，注意视口这个概念。

 <style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            position：absolute;
            width:100px;
            height:100%;//改变百分比为50%
            background-color: #58d3e2;
        }
    </style>
<div class="box">height 100%</div>

改变height分别为100%和50%，可以发现html的高度为0，并没有自适应div的高度，因为div已经彻底脱离标准流了，我们说过，如果绝对定位没有定位的祖先元素，则包含块为初始包含块，这里的初始包含块即为可视区，所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度，把滚动条往下拉拉就知道了。

2.绝对定位的元素在另外一个定位元素里面（除static外）

这时百分比参照的是父元素生成的包含块计算出来的值

所以想让定位元素的高度占满整个屏幕，可以：

body{
  position:relative;
}

margin-left设置成百分比

  <style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: 100%;
            background-color: #58d3e2;
        }
    </style>
<div class="box">margin-left</div>

这时出现了滚动条，这是因为将div的margin-left设置成了100%，而百分比是参照其包含块body的宽度，body又是参照的html（某些浏览器将它当作初始包含块）。而html的初始包含块是可视区，所以可视区的宽度再加上元素的100%，自然就超出了屏幕了。

解决方法：

（1）利用calc函数

<style>
        body,div{
            margin:0;
            padding：0；
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: calc(100%-100px);
            background-color: #58d3e2;
        }
    </style>
<div class="box">margin-left</div>

（2）让body的宽度减去100px,因为div的百分比是参照其父元素的宽度计算的，因此这里将它的父元素的宽度减小，那么它的margin-left的100%自然就小了

<style>
        body,div{
            margin:0;
            padding：0；
        }
         body{
             margin-right；100px;
        }
        .box{
            position:absolute;
            width:100px;
            height:100px;
            margin-left: 100%;
            background-color: #58d3e2;
        }
    </style>
<div class="box">margin-left</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

CSS,百分比

标签：

CSS,百分比

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“浅谈CSS中的百分比”

浅谈CSS中的百分比

暂无“浅谈CSS中的百分比”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

浅谈CSS中的百分比

CSS,百分比

使用CSS3实现环形进度条效果

CSS3截取字符串实例代码【推荐】

评论“浅谈CSS中的百分比”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

浅谈CSS中的百分比

CSS,百分比

使用CSS3实现环形进度条效果

CSS3截取字符串实例代码【推荐】

评论“浅谈CSS中的百分比”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存