金魚都能懂的網頁設計入門-第十天 學習筆記 換個新盒子 border-box content-box

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第十天 -換個新盒子 border-box content-box

box-model 盒模型box-sizing:

如果設定 border-box ：width指定給邊框到邊框的範圍。 所以padding 及border 就會自動內推。
如果設定 content-box,
是傳統的計算方式,
width指定給內容物的寬度.
所以 padding 及 border就會往外加。

box-size: border-box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 金魚都能懂的網頁設計入門-第十天 -換個新盒子</title>
    <style>
        div{
            width: 300px;
            background-color: chocolate;
            border: 10px solid red;
            padding: 10px;
            box-sizing: border-box; /* 這樣 div 的尺寸就會是 width 所指定的尺寸: 300px ,這樣就不用再計算 box-model尺寸 */
            /* box-sizing: content-box; */
            /*width指定給內容物的寬度.
  所以 padding 及 border就會往外加。*/ 
            

        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eum dolor inventore recusandae corrupti quia non at, praesentium, cumque, maiores consequuntur nisi quaerat quis. Alias aperiam delectus nemo totam sequi.
        Eius totam a expedita debitis illo, vitae repellat esse commodi necessitatibus, maiores sunt nihil autem earum tenetur, veritatis quos sequi voluptas saepe rem modi unde molestias similique? Adipisci, repudiandae nostrum!
        Numquam repellendus minus molestias eum enim officiis est similique culpa ratione incidunt debitis a quidem tempora quibusdam quisquam tempore omnis quod assumenda, minima facere iure quas nam aut! Ut, nihil!
    </div>
    
</body>
</html>

box-size: content-box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 金魚都能懂的網頁設計入門-第十天 -換個新盒子</title>
    <style>
        div{
            width: 300px;
            background-color: chocolate;
            border: 10px solid red;
            padding: 10px;
            /* box-sizing: border-box; 這樣 div 的尺寸就會是 width 所指定的尺寸: 300px ,這樣就不用再計算 box-model尺寸 */
            box-sizing: content-box;
            /*width指定給內容物的寬度.
  所以 padding 及 border就會往外加。*/ 
            

        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eum dolor inventore recusandae corrupti quia non at, praesentium, cumque, maiores consequuntur nisi quaerat quis. Alias aperiam delectus nemo totam sequi.
        Eius totam a expedita debitis illo, vitae repellat esse commodi necessitatibus, maiores sunt nihil autem earum tenetur, veritatis quos sequi voluptas saepe rem modi unde molestias similique? Adipisci, repudiandae nostrum!
        Numquam repellendus minus molestias eum enim officiis est similique culpa ratione incidunt debitis a quidem tempora quibusdam quisquam tempore omnis quod assumenda, minima facere iure quas nam aut! Ut, nihil!
    </div>
    
</body>
</html>

另外 ，如果製作3欄的版面 利用 border-box , 就只要額外計算margin的尺寸即可.

每個item : 300px + margin: 10px*2 = 320px
共3欄 = 320px * 3 = 960px 剛好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金魚都能懂的網頁設計入門-第十天 -換個新盒子</title>
    <style>
        .wrap{
            width:960px;
            margin:auto;
            background-color: #ffa;

        }
        .clearfix{
            width: 100%;
            clear: both;
        }
        .col{
            background-color: white;
            width: 300px;
            margin: 10px;
            padding: 10px;
            float: left;
            border: 3px double #aaa;
            box-sizing: border-box; /* 讓盒模（box sizing )維持  300px 不會跑版 */
            /* box-sizing: content-box; /* 設定為 content-box 則寬度會超過 300px , 會容易因為 margin 及 padding 或 border 的外加尺寸而跑版 */
                      
        }
    </style>

</head>
<body>
    <div class="wrap">
        <div class="col">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis ullam magnam laborum natus ad recusandae quam iste necessitatibus excepturi aut aperiam fugiat at officia harum perferendis obcaecati quis, odit ipsam.
        </div>
        <div class="col">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis ullam magnam laborum natus ad recusandae quam iste necessitatibus excepturi aut aperiam fugiat at officia harum perferendis obcaecati quis, odit ipsam.
        </div>
        <div class="col">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis ullam magnam laborum natus ad recusandae quam iste necessitatibus excepturi aut aperiam fugiat at officia harum perferendis obcaecati quis, odit ipsam.
        </div>
        <div class="clearfix"></div>
    </div>
</body>
</html>

文獻連結:
金魚都能懂的網頁設計入門-第十天 -換個新盒子
https://www.youtube.com/watch?v=O8EOgg-hhvI&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=10 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos