box-sizing的介紹

要講boxsizing之前，必須得充分了解到box model的概念，如果還不了解box-model可以參考下面文章。

CSS中box-model的差異

為了控制不破版，每次都必須計算border+padding，但這樣真的太麻煩了，所以要解決這問題則可以使用box-sizing，這個屬性將決定，box-model的值是內含還是外加，這裡講討論到兩個box-sizing值，分別為content-box跟border-box

content-box

這是標準盒子模型，盒子只包含高跟寬，所有padding跟border算在box外面

設定：

• width : 100px
• height : 100px
• padding : 10px
• border :10px

實際盒子大小為：

內容的高 100px + padding 10px + border 10px

內容的寬 100px + padding 10px + border 10px

border-box

盒子裡不只有高跟寬，所有padding跟border 算在box裡面

設定：

• width : 100px
• height : 100px
• padding : 10px
• border :10px

實際盒子大小為：

內容的高 100px

內容的寬 100px

呈現方式

依照上面的範例，設定width : 100px ,height : 100px，padding : 10px，border :10px，然後為了看得更清楚，外框border設定紅色框，背景為粉色，盒子一是content-box，盒子二是border-box

HTML

<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>

CSS

<style>
        div {
            border: 10px solid red;
            background: pink;
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .box1 {
            box-sizing: content-box;
        }
        .box2 {
            box-sizing: border-box;
        }
    </style>

程式執行結果

可以看到設定盒子一content-box，因為長跟寬加上了padding跟border，所以明顯比盒子二的border-box還大