浅谈CSS中的百分比

日期:2021-03-17 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

本文详细介绍了浅谈CSS中的百分比,共享给大伙儿,实际以下:

结果:

  1. 规范流中的元素,看其特性有木有承继性。针对width和margin-left,它是能够承继的,它会参考父元素或先祖元素(实际上是包括块);针对height,它沒有承继性,父元素或先祖元素会自融入其全部子元素的高宽比和(这点是必须留意的)。
  2. 肯定精准定位参考的是离它近期的父元素或先祖元素,假如沒有父元素或先祖元素,那末参考的是原始包括块(不一样的访问器将会不1样,由于W3C沒有要求访问器材体怎样去完成)。但具体上,绝大多数访问器将可视性区作为肯定精准定位的包括块。
  3. 固定不动精准定位参考可视性区

width设定成百分比

1般子元素一般将承继父元素测算过的值作为百分比的参考,针对不能承继的特性和根元素,则应用原始值做为参考

例如.box沒有设定宽度,但默认设置承继了body测算过的值,又由于.box是.item的父元素,因而.item又承继了.box测算过的值。当1个块级元素不设定宽度时,则它的宽度默认设置为全屏,便是由于它承继了包括块的宽度。

height设定成百分比

结果

高宽比设定成百分比时,高宽比不像宽度1样会承继父元素或先祖元素,相反,父元素或先祖元素会依据子元素的具体高宽比(高宽比测算值)来自融入,1般为全部子元素的內容加起来的高宽比和。而子元素会依据文本行高来设定高宽比实际值(在子元素高宽比不设定实际值的状况下)。针对有absolute精准定位的元素,其高宽比为百分比时会参考父元素或先祖元素的高宽比,肯定精准定位参考的是离它近期的父元素或先祖元素,假如沒有父元素或先祖元素,那末参考的是原始包括块(不一样的访问器将会不1样,由于W3C沒有要求访问器材体要怎样完成)。但具体上,绝大多数访问器将可视性区作为肯定精准定位的包括块。

大家1般喜爱将宽度设定成百分比,但在将高宽比设定成百分比的情况下要留意。

 <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%結果還是1样。实际上这里的高宽比为行高的高宽比,也便是说,在高宽比为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高宽比1样为100px.因此能够得出父元素在不设定高宽比的状况下,是自融入子元素高宽比的(在不设定高宽比的状况下,html和body的高宽比是全部內容加起来的高宽比),假如父元素设定了高宽比,则是此外1种状况了:

 <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.肯定精准定位沒有精准定位的先祖元素

这时候肯定精准定位参考的是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%时占视口的1半。留意这只是1个视口的高宽比,把翻转条拉下去拉就了解了。

2.肯定精准定位的元素在此外1个精准定位元素里边(除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%⑴00px);
            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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:店铺经营的內容实际包含什么 返回下一篇:没有了