Box Sizing

Posted on Edited on In Views: Disqus:

 

Box Sizing是用來解決每個元素寬度不一的問題，在RWD有廣泛的應用。

Box Sizing有三個屬性值分別為content-box(預設值)、border-box、padding-box

<!DOCTYPE html>
<html>
<head>
    <style>
        .content-box {
            width: 300px;
            height: 100px;
            border: 10px solid blue;
            box-sizing: content-box;
            padding: 10px;
        }

        .border-box {
            width: 300px;
            height: 100px;
            border: 10px solid red;
            box-sizing: border-box;
            padding: 10px;
            margin: 0 0 0 20px;
        }

        .padding-box {
            width: 300px;
            height: 100px;
            border: 10px solid red;
            box-sizing: padding-box;
            padding: 10px;
        }

        .content {
            background-color: gray;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="content-box">
        <div class="content"><b>content-box</b><br>
          actually width: 300px<br>
          actually border: 10px<br>
          actually padding: 10px
      </div>
    </div>
    <br>
    <div class="border-box">
        <div class="content"><b>border-box</b>
          <br>actually width: 260px<br>
          actually border: 10px<br>
          actually padding: 10px<br>
          actually margin: 20px
      </div>
    </div>
    <br>
    <div class="padding-box">
        <div class="content"><b>padding-box</b><br>
          actually width: 300px<br>
          actually border: 10px<br>
          actually padding: 10px
      </div>
    </div>
</body>
</html>

content-box意指一個元素的寬度就等於原本元素的寬度，並不包含padding寬度+border寬度

border-box意指一個元素的寬度要等於原本元素的寬度(會犧牲自有寬度)+padding寬度+border寬度

padding-box意旨一個元素的寬度等於原本元素的寬度+padding寬度，並不包含border寬度，

注意目前chrome還不支援padding-box。

後來發現padding-box於W3C已在2015/05/19因沒有實現價值，故被拿掉了。

 

再舉一個例子，我曾經在 Bootstrap framework 底下，

父元素預設已使用 width:100%，而我自己在子元素也套用 width:100%，

為何子元素寬度卻有誤差，寬度無法達到我認為的 100%？

原因在於 box-sizing: border-box;

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        body {
            margin: 0;
        }
        .container-fluid {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            border: red 1px solid;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
            border: blue 1px solid;
            width: 100%;
        }
    </style>
    <title>Hello, world!</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row" id="banner">
            <div class="main-header-content">
                <h1 class="page-title">PRO SHIEH</h1>
                <h2 class="page-description">do me best, make you want.</h2>
            </div>
        </div>
    </div>
</body>
</html>

 

參考資料：

Box Sizing