CSS中box-sizing的屬性用法

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還大

我是盒子1
我是盒子2

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *