我要成為前端工程師的學習筆記：HTML & CSS 篇 - Box Model、區塊水平置中、文字水平調整 Day7

Box Model（盒模型）

box model 合模型，在 HTML 裡一個很基礎且重要的一個環節，只要 box model 學得好的話，排版可以排得很整齊，能提升網站使用者體驗，所以必須要了解並熟練。

我們用這張圖來解釋 box model

首先我們寫一個 div 寬 300px 高 300px，這是 div 本身的實體大小，接下來我們再加 padding: 50px 四邊內部留白，以及 border: 10px 四邊實線，然後再加向四邊外推 margin: 50px，最後就是來算我們 div 實體跟網頁上空間占多少大小。

div 實體大小
寬: 300px + 50px * 2px + 10px * 2px = 420px
高: 300px + 50px * 2px + 10px * 2px = 420px
總實體大小: 420px * 420px

網頁空間大小
寬: 420px + 50px * 2px = 520px
高: 420px + 50px * 2px = 520px 
總網頁空間大小: 520px * 520px

這裡為什麼是 50px * 2px 跟 10px * 2px，原因是寬高兩邊都有各加 50px 跟 10px，所以試乘以 2。

margin 0 auto 區塊水平置中

margin 0 auto 它已經是寫網頁必用的一個 CSS 語法，功用是讓區塊水平置中，什麼要這麼做呢？
主要是讓使用者能有比較好閱讀體驗，假如一個網站內容幾乎是滿版的話，會對使用者在閱讀上會比較吃力且不清晰，而我們加上 margin 0 auto 把內容集中在中間，閱讀體驗就能比較順暢清晰，所以業界大部分網站都會這樣設定，來增加使用者體驗。

補充：我們在寫網頁時盡量不要把高度寫死，因為你不知道一個網站內容有多長，或是什麼時候會加新內容，如果寫死高度你的內容超過設定好高度的區塊，版型它就會跑掉變得很奇怪，所以高度會讓內容自適應，除非你那區塊是固定沒有要更動就可以寫死高度。

HTML

<div class="wrap">
  <div class="header"></div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
        dolore? Assumenda, beatae saepe!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
        dolore?
        Assumenda, beatae saepe!</p>
  </div>
  <div class="footer"></div>
</div>

CSS

.wrap {
  width: 500px;
  background: black;
  margin: 0 auto;
}

.header {
  height: 50px;
  background: red;
}

.content {
  background: blue;
  padding: 20px;
}

.content p {
  color: white;
  margin-bottom: 30px;
}

.footer {
  height: 50px;
  background: pink;
}

呈現畫面

text-align 文字水平調整

text-align 功用是調整文字水平的位置，像是文字靠左、文字置中、文字靠右，排版會蠻常用到。
語法:

text-align: left;    // 文字靠左
text-align: center;  // 文字置中
text-align: right;   // 文字靠右

HTML

<div class="wrap">
  <div class="header"></div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
        dolore? Assumenda, beatae saepe!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid eos, nam error ad laborum perspiciatis
        dolore?
        Assumenda, beatae saepe!</p>
  </div>
  <div class="footer">
    <p>
      地址:高雄市前鎮區33號
      <br>
      tel: (07)3345678
    </p>
  </div>
</div>

CSS

.wrap {
  width: 500px;
  background: black;
  margin: 0 auto;
}

.header {
  height: 50px;
  background: red;
}

.content {
  background: blue;
  padding: 20px;
}

.content p {
  color: white;
  margin-bottom: 30px;
}

.footer {
  background: pink;
  padding: 10px 0;
  text-align: center;
}

呈現畫面

box-sizing

假如我們不想算 box model 的推擠，可以使用 box-sizing 來讓它自己計算，不過呈現出來效果會跟 box model 不一樣，
box-sizing 是直接拿實體大小自己去算有加 padding 跟 border 的尺寸，而 box model 是實體大小外加 padding 跟 border 的尺寸，如果兩個寬高設定一樣，所呈現出來的效果會是不一樣，我們來看看範例。

補充：如果我們要設定全部網站都可以吃到 CSS 效果的語法是
*, *:before, *:after { ... }

HTML

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

CSS

.box1 {
  background-color: black;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 10px solid blue;
  box-sizing: border-box;
}

.box2 {
  background-color: black;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 10px solid blue;
}

呈現畫面