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

成都創(chuàng)新互聯(lián)專注于新賓企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站制作。新賓網(wǎng)站建設(shè)公司,為新賓等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

原因: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)容的寬度和高度。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：元素width:100%;設(shè)置padding出現(xiàn)橫向滾動條的問題-創(chuàng)新互聯(lián)
分享路徑：http://weahome.cn/article/dhiddj.html