您好,登錄后才能下訂單哦!
如何使用border-box改變盒子尺寸?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
Box大小調(diào)整屬性用于更改元素的高度和寬度。
從css2開始,box屬性的工作方式如下所示 :
width + padding + border =元素框的實際可見/渲染寬度 height + padding + border =元素框的實際可見/渲染高度
意味著當您設(shè)置高度和寬度時,它會顯得稍微大些,然后給定大小會導(dǎo)致元素邊界和填充添加到元素的高度和寬度。
一:CSS大小調(diào)整屬性
例如:
<html> <head> <style> .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } </style> </head> <body> <div class = "div1">億速云</div><br /> <div class = "div2">億速云</div> </body> </html>
結(jié)果:
上圖中兩個元素的寬度和高度相同但給出的結(jié)果不同,導(dǎo)致第二個包含填充屬性。
二:CSS3框大小屬性
代碼實例:
<html> <head> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } </style> </head> <body> <div class = "div1">億速云</div><br /> <div class = "div2">億速云</div> </body> </html>
上面的元素具有相同的高度和寬度與box-sizing:border-box,因此對于兩個元素,結(jié)果總是相同的,如上所示。
看完上述內(nèi)容,你們掌握如何使用border-box改變盒子尺寸?的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。