更新時間:2021-06-09 來源:黑馬程序員 瀏覽量:
在CSS3中,通過box-sizing屬性可以更改盒子尺寸的計算方式。將box-sizing設為content-box(默認值)時,表示使用傳統(tǒng)的計算方式;設為border-box時,表示使用CSS 3的一種新的計算方式,通過這種方式可以解決傳統(tǒng)盒子在添加了邊框和內邊距之后,盒子被撐大的問題。示例代碼如下。
/* 傳統(tǒng)計算方式 */ box-sizing: content-box; /* 新的計算方式 */ box-sizing: border-box;使用content-box計算方式的盒子模型,其寬度的計算公式如下。
盒子的寬度 = CSS中設置的width + border + padding使用border-box計算方式的盒子模型,其寬度的計算公式如下。
盒子的寬度 = CSS中設置的width當采用border-box計算方式時,CSS中設置的寬度width已經(jīng)包含了border和padding值,不用擔心因為設置了元素的border和padding導致盒子被撐大的問題。這種方式的優(yōu)點在于,盒子的大小是固定的,不會受到邊框和內邊距的影響,也不會影響到頁面中其他盒子的結構。因此,在移動Web開發(fā)中,推薦使用border-box這種計算方式。
為了讓讀者更好地理解,下面通過例2-4演示content-box和border-box的區(qū)別。
【例2-4】
(1)創(chuàng)建C:\web\chapter02\demo04.html文件,具體代碼如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>box-sizing</title> <style> div { width: 100px; height: 100px; padding: 10px; background-color: #eee; } div:nth-child(1) { border: 10px solid #999; box-sizing: content-box; } div:nth-child(2) { border: 10px solid #666; box-sizing: border-box; } </style> </head> <body> <div>content-box</div> <div>border-box</div> </body> </html>
上述代碼中,第7~12行代碼用于為所有div設置樣式,第13~16行代碼用于為第1個div設置樣式,第17~20行代碼用于為第2個div設置樣式。第15行將第1個div設置為content-box,第19行將第2個div設置為border-box。
(2)在瀏覽器中打開demo04.html文件,運行結果如圖1所示。
圖1 對比content-box和border-box
從圖1可以看出,雖然content-box和border-box在CSS中設置的寬高都是100px,但因為box-sizing不同,content-box會被外邊距和邊框撐大,而border-box不會被撐大。