width:100%和width:inherit
阿新 • • 發佈：2017-07-29
屬性 結構 有一點 後來 round 不能 epp 你們 支持
前幾天遇到過這麽一個問題。我想讓子盒子的寬度等於父盒子的寬度。父盒子寬度為一個具體值比如說200px.我將子盒子寬度設為了100%。按道理說應該是可以等於父盒子的寬度的，但結果並沒有，而是通欄了。然後我又將子盒子寬度設為了inherit。結果寬度就是父盒子的寬度了。
HTML結構如下：
<body> <div class="parent"> <div class="child"> hello world </div> </div></body>
我想了很久沒有想出來，後來請同事幫我一看。原來我的子盒子設了絕對定位，但父盒子沒有設置相對定位。所以子盒子脫離了父盒子，導致子盒子的百分之百直接和body的寬度一致了。而子盒子雖然定位上脫離了文檔流，但在節點樹上他依然是父盒子的兒子，所以如果設置width：inherit的時候，瀏覽器會將父盒子的寬度賦值給他。
那麽解決的辦法有兩種，一種是像我這樣設置成width：inherit。這樣的好處是節約代碼，但有一點點小小的兼容問題。ie8以下的瀏覽器不支持inherit屬性值。如果你們公司放棄IE8以下的兼容，那我覺得用inherit是很好的一種方式。
.parent{ width: 300px; height: 300px; background: deeppink; } .child{ width: inherit; position: absolute; background: pink; }
第二種就是在父盒子上加上相對定位，這種方法的好處是兼容性比較好，缺點就是代碼量稍微多了兩句，而且要細心一些不能像我一樣忘記加相對定位
.parent{ width: 300px; height: 300px; background: deeppink; position: relative; } .child{ width: 100%; position: absolute; background: pink; }
width:100%和width:inherit