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>