0016.width:100% · 每天一道面試題

"width:100%"是一個很常用的屬性，當對子元素這樣設置的時候，子元素的寬度就等于父元素的寬度。但是，這句話還不夠準確。子元素的寬度指什么？子元素內容區域的寬度還是包括padding/border的總寬度？父元素的寬度指什么？父元素內容區域的寬度還是包括padding/border的總寬度？這就是這篇博客的主要議題。我們直接來看例子： ~~~html // html <body> <div class='parent'> parent <div class='child'> child </div> </div> </body> ~~~ ~~~css // css .parent{ margin:100px auto; width:600px; border:100px solid #ddd; padding:100px; } .child{ width:100%; border:50px solid pink; padding:50px; } ~~~ 結果： ![](https://img.kancloud.cn/ec/2f/ec2f52e93bebf4b97d3bcca3526a614d_1058x710.png) 由圖可知：父元素內容區域寬度：600px，padding：100px，border：100px，總寬度：1000px; 子元素內容區域寬度：600px，padding：50px，border：50px，總寬度：800px。由此可知，子元素設置寬度的百分比是指**子元素內容區域**相對于**父元素內容區域**；同時，正是由于子元素設置寬度的百分比是指子元素內容區域相對于父元素內容區域，所以造成了**子元素溢出了父元素**。在以上示例中，我們沒有設置box-sizing屬性，因此box-sizing默認為content-box。現在，我們為元素設置`box-sizing:content-box`，再看看結果： ~~~css // css *{ box-sizing:border-box; } ~~~ 結果： ![](https://img.kancloud.cn/77/95/779543094cc77d9d51dded011c5e7fa3_661x708.png) 由圖可知：父元素內容區域寬度：200px，padding：100px，border：100px，總寬度：600px; 子元素內容區域寬度：0px，padding：50px，border：50px，總寬度：200px。由此可知，當設置`box-sizing:border-box`時，子元素設置寬度的百分比是指**子元素整個盒子區域**相對于**父元素內容區域**。 > 總結： > 1、當設置"box-sizing:content-box"時，子元素設置寬度的百分比是指**子元素內容區域**相對于**父元素內容區域**； > 2、當設置"box-sizing:border-box"時，子元素設置寬度的百分比是指**子元素整個盒子區域**相對于**父元素內容區域**； > 3、如果想要正確使用"width:100%"這一屬性，一定要設置"box-sizing:border-box",否則會造成子元素溢出。