更新時(shí)間:2021年09月24日11時(shí)50分 來源:傳智教育 瀏覽次數(shù):
box-sizing: border-box什么意思? box-sizing: border-box就是將border和padding數(shù)值包含在width和height之內(nèi),這樣的好處就是修改border和padding數(shù)值盒子的大小不變。
當(dāng)一個(gè)盒子的總寬度確定之后,要想給盒子添加邊框或內(nèi)邊距,往往需要更改 width屬性值,才能保證盒子總寬度不變,操作起來煩瑣且容易出錯(cuò),運(yùn)用CSS3的box-sizing屬性可以輕松解決這個(gè)問題。box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框,其基本語法格式如下。
box-sizing: content-box/border-box;
在上面的語法格式中,box-sizing屬性的取值可以為content-box或border-box,對它們的解釋如下。
●content-box:瀏覽器對盒模型的解釋遵從W3C標(biāo)準(zhǔn),當(dāng)定義width和height時(shí),它的參數(shù)值不包括border和padding。
●border-box:當(dāng)定義width和height時(shí),border和padding的參數(shù)值被包含在width和height之內(nèi)。
下面通過一個(gè)案例對box-sizing屬性進(jìn)行演示,如下所示。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>box-sizing屬性用法</title> <style type="text/css"> .box1{ width: 300px; height: 100px; padding-right: 10px; background: #F90; border: 10px solid #ccc; box-sizing: content-box; } .box2{ width: 300px; height: 100px; padding-right: 10px; background: #F90; border: 10px solid #ccc; box-sizing: border-box; } </style> </head> <body> <div class="box1">content_box屬性</div> <div class="box2">border_box屬性</div> </body> </html>
在上面案例中定義了兩個(gè)盒子,并對它們設(shè)置相同的寬、高、右內(nèi)邊距和邊框樣式。并且,對第一個(gè)盒子定義“box-sizing: content-box;”樣式,對第二個(gè)盒子定義“box-sizing: border-box;”樣式。
可以發(fā)現(xiàn)應(yīng)用了“box-sizing: content-box;”樣式的盒子1,寬度比width參數(shù)值多出30px,總寬度變?yōu)?30px;而應(yīng)用了“box-sizing: border-box;”樣式的盒子 2,寬度等于width參數(shù)值,總寬度仍為300px。應(yīng)用“box-sizing: border-box;”樣式后,盒子border和padding的參數(shù)值是被包含在width和height之內(nèi)的。
猜你喜歡:
CSS3 box-shadow的用法|box-shadow屬性詳解
北京校區(qū)