CSS3 - 盒子大小(CSS3 - Box Sizing)

Box大小調整屬性用于更改元素的高度和寬度。

從css2開始，box屬性的工作方式如下所示 -width + padding + border =元素框的實際可見/渲染寬度

height + padding + border =元素框的實際可見/渲染高度

意味著當你設置高度和寬度時，它會顯得稍微大些，然后給定大小導致元素邊界和填充添加到元素的高度和寬度。

CSS2大小調整屬性

.div1 {

width: 200px;

height: 100px;

border: 1px solid green;

}

.div2 {

width: 200px;

height: 100px;

padding: 50px;

border: 1px solid pink;

}

iowiki.comiowiki.com

它會產生以下結果 -新頁面打開

上圖中兩個元素的寬度和高度相同但給出的結果不同，導致第二個包含填充屬性。

CSS3框大小屬性

.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;

}

iowiki.comiowiki.com

上面的樣本具有相同的高度和寬度與box-sizing:border-box 。 這里的結果如下所示。

它會產生以下結果 -新頁面打開

上面的元素具有相同的高度和寬度與box-sizing:border-box，因此對于兩個元素，結果總是相同的，如上所示。

CSS3 - 用戶界面(CSS3 - User Interface)

總結

以上是生活随笔為你收集整理的html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。