元素width:100%; 設(shè)置padding出現(xiàn)橫向滾動條的問題

當(dāng)我們給塊元素設(shè)置寬度為100%，然后再設(shè)置padding值想讓里面的內(nèi)容有一定的內(nèi)邊距時，會發(fā)現(xiàn)此時內(nèi)邊距的效果達(dá)到了，但是卻出現(xiàn)了橫向滾動條，

原因:padding 是邊框和里面內(nèi)容之間的間隙，如果你設(shè)置了padding，padding的值是不變的，當(dāng)內(nèi)容+padding大于容器時，它會以容器的左上角為中心，保持padding的距離向外擴(kuò)展，因此出現(xiàn)了滾動條，正常解決辦法是，將元素寬度減去padding值的2倍，但是現(xiàn)在元素寬度值并不是具體的px值，而是百分?jǐn)?shù)，

這種情況下解決辦法有兩種：
1.最簡單的辦法是去掉元素寬度值設(shè)置，width:100%，塊級元素默認(rèn)就是100%寬度，設(shè)置padding后，padding會被計(jì)算為寬，實(shí)際效果的寬度會自適應(yīng)的調(diào)整為100%。
2.利用css3新特性給父級設(shè)置box-sizing：border-box; 此時元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制，元素設(shè)定的寬度和高度會自動減去邊框和內(nèi)邊距得到內(nèi)容的寬度和高度。