金魚系列，盒模型篇

#box-model #box-sizing #padding #border #margin

Posted by s103071049 on 2021-05-27

如何讓網頁按照你想要的樣子排出來 ? 答：排版時必須考慮尺寸的計算，差了一像素一點小細節，畫面就會死掉。

版塊尺寸計算模型：box model

盒模型的本質是在探討物件於畫面中佔據掉的空間是多少，要能算出物件的尺寸才不會導致排版壞掉。

現在尺寸：300px

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <style type="text/css">
    div {
      background: gray;
      width: 300px;
    }

  </style>
</head>
<body>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>

寬度 + 邊框線的粗細 = 目前我佔據掉的尺寸
現在尺寸：320px

  <style type="text/css">
    div {
      background: gray;
      width: 300px;
      border: 10px solid red ;
    }
  </style>

希望內文與邊框線有距離，我會加上內距，padding
現在尺寸：360px

    div {
      background: gray;
      width: 300px;
      border: 10px solid red ;
      padding: 20px;
    }

結論：寬度的設計是指內容的寬度而非整體的寬度，整體的寬度等於 width + border + padding。上述 width、border、padding，是我們可以看的到的寬度。

仔細觀看畫面，div 和週圍有距離。藉由使用萬用選取器進行 css reset，解決上述狀況。

    * {
      margin: 0;
      padding: 0;
    }

是看不到的尺寸 margin ：物件與物件之間的距離，舉例來說 : 兩個 div 之間的距離。
現在尺寸：400px

   * {
      margin: 0;
      padding: 0;
    }
    div {
      background: gray;
      width: 300px;
      border: 10px solid red ;
      padding: 20px;
      margin: 20px;
    }

實際上物件所佔據掉的空間：width + border + padding + margin

說明：事實上 style 標籤，可以放在任意位置。大多數情況為了區別與 html，會放在 header。

實戰演練

希望有個畫面是個容器，裡面有三個欄，高度我們都讓內容去撐開。

<body>
  <div class="box">
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>

</body>

因為父層只有 600px ，實際上物件所佔據掉的空間：width + border + padding + margin，目前我的像素是 (200 + 20)*3，因為 660px > 600px 放不下去，所以第三個就自動換行了。

  <style type="text/css">
    .box {
      background: red;
      width: 600px;
    }
    .column {
      width: 200px;
      background: green;
      float: left;
      margin: 10px;
    }
  </style>

運用盒模型進行換算調整， width: 180px;，此外 column 是放在 box 區塊，如果希望 box 可以置中，可以在 box 上加上 margin: auto

  <style type="text/css">
    .box {
      background: red;
      width: 600px;
      margin: auto;
    }
    .column {
      width: 180px;
      background: green;
      float: left;
      margin: 10px;
    }
  </style>

我希望文字與邊邊有距離，直接加 padding: 10px => 壞掉，(因為左右共 20px，
會超過 600px)，經過尺寸計算 width: 160px;

    .box {
      background: red;
      width: 600px;
      margin: auto;
    }
    .column {
      width: 160px;
      background: green;
      float: left;
      margin: 10px;
      padding: 10px;
    }

我想加個框線，border: 1px solid purple 又爆了，因為左右兩條，三個盒子共六條線，所以又超過 600px，因為每一個多增加了 2px，所以要調整 width: 158px;

    .box {
      background: red;
      width: 600px;
      margin: auto;
    }
    .column {
      width: 158px;
      background: green;
      float: left;
      margin: 10px;
      padding: 10px;
      border: 1px solid red;
    }

總結 ：
1 可見尺寸的計算：width + border + padding
2 佔據空間的計算 = 可見尺寸 + 不可見尺寸 = width + border + padding +margin = 整體的寬度
3 外距的英文是甚麼：margin
4 外距是甚麼意思：邊框到外部的距離
5 內距的英文是甚麼：padding
6 內距是甚麼意思：物件的內部距離
7 width定義出來的範圍是誰的範圍：元素內容的寬度而非整體的寬度

box model 的計算很麻煩，為了解決每次設計都要重複盒模型的數學運算，所以推出了新的盒子。

box-sizing

box-sizing 所控制的是盒模型的計算方式，他所控制的是寬度值(width)，要指定給誰。如果設定box-sizing: border-box;，就代表我要把寬度指定給邊框到邊框這邊的尺寸。所以邊框到邊框就等於我的 width 300px，padding 與 border 就會自動的往內推。留心：margin 仍是額外加上，他不會幫你扣掉。

現在尺寸：300px

  <style type="text/css">
    .box {
      background: red;
      width: 300px;
      border: 10px solid green;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>


</body>

換個寫法，box-sizing: content-box;，content-box 採用傳統的計算方式，他的寬度值是指定給內容物，所以 padding、border 就會往外加。

現在尺寸：340px

  <style type="text/css">
    .box {
      background: red;
      width: 300px;
      border: 10px solid green;
      padding: 10px;
      box-sizing: content-box;
    }
  </style>

結論： box-sizing 所指定的是我的寬度(width)要給誰

新盒子進行實戰

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>document</title>
  <style>
    .wrap {
      width: 960px;
      height: 1280px;
      margin: auto;
      background-color: black;

    }
    .clearfix {
      width: 100%;
      clear: both;
    }
    .item {
      width: 300px;
      margin: 10px;
      background-color: green;
      padding: 10px;
      float: left;
      box-sizing: border-box;
      border: 3px double red ;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <clear class="fix"></clear>
    </div>
</body>
</html>

重點回顧

  1. 盒模型有哪兩種模式 : content-box、border-box
  2. 盒模型的兩種計算方式 : content-box 的寬度是內容的寬度，換句話說 padding、border，都是額外加上去；border-box 的寬度是邊框的寬度，換句話說 padding、border，都已經內涵在盒子的寬度計算中
  3. 盒模型的設定方式：可以將 html 裡面的每一個元素想像成一個盒子，盒模型的設定也就是考量我要將 width 指定給誰，height 的設定同 height。

#box-model #box-sizing #padding #border #margin

s103071049




Related Posts

[C#] LINQ Group By

[C#] LINQ Group By

 adrianwudev
Day 71

Day 71

 estella00911
KIOPTRIX: LEVEL 1 攻略紀錄

KIOPTRIX: LEVEL 1 攻略紀錄

 nathan2009729

Comments