在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ :before設(shè)置width:inherit結(jié)果寬度超出父元素寬度

:before設(shè)置width:inherit結(jié)果寬度超出父元素寬度

一個(gè)div設(shè)置寬度15%，給他加了:before,寬度設(shè)置的inherit，但是實(shí)際寬度超出了div的寬度
<div class="aside-left">
</div>
<style type="text/css">

   .aside-left{
     width: 15%;
     float: left;
     background-color:blue;
   }
   .aside-left::before{
    content: "";
        width: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: inherit;
        border: inherit;
   }

</style>
瀏覽器實(shí)際顯示的.aside-left寬度為285.59，:before的寬度為288，這是為什么呢
回答
編輯回答
浪婳

aside-left寬度width:15%是根據(jù)其父元素的寬度來計(jì)算
aside-left::before寬度width:inherit繼承aside-left為width:15%
又因?yàn)閍side-left::before是position:absolute絕對定位寬度是根據(jù)最近的相對定位的祖類來計(jì)算

上面問題是因?yàn)檫@倆寬度一個(gè)是計(jì)算body的15% 一個(gè)計(jì)算html的15%
而瀏覽器默認(rèn)樣式body {margin: 8px;}
所以計(jì)算出來寬度差有 8x2x15% = 2.4

2018年2月16日 10:15
編輯回答
練命

在.aside-left里面添加position: relative;

.aside-left {
    position: relative;
    width: 15%;
    float: left;
    background-color:blue;
}

position: absolute是相對于position屬性不為static的最近的祖先元素定位的。如果相對于.aside-left定位，需要修改position屬性。

2018年1月12日 16:05