盒子模型分為標準盒子模型和怪異的盒子模型
1.標準的盒模型 （content-box）
你設定的寬和高（width/height）是內容的部分寬高，所以盒子的實際寬度=內容的寬高+boder+padding+margin
我設定的寬為100px高為100px，是內容的寬高，實際盒子的寬150px高為150px 寬=100px(conttent)+20px(padding)+5*2（border）
所以可以得出：如果你想要的盒子就是寬100px 高為100px的話，就不能再改變盒子的padding和border的值，選用border-box
2.怪異的盒子模型(border-box)
你設定的寬和高（width/height）就是盒子的大小，設定的padding和border不會改變盒子的大小，相反的是內容區的高度會隨之而改變
從上面的圖可知，只是改變了box-sizing為border-box
設定的寬高都為100px 盒子的padding值20px border值為5px，盒子的寬度沒有改變內容的寬度卻減小了，變成了50px，下面我繼續變大padding可以明顯的看見變化
padding為25px border為5px content寬度為40px ,盒子的大小沒有變化，還是100px(25*2+40+5*2)
padding為20px border為10px content寬度為40px ,盒子的大小沒有變化，還是100px(20*2+40+10*2)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/263280.html
標籤：Html/Css