HTML \ CSS 初學者易混淆觀念 + 表單樣式實作

請找出三個課程裡面沒提到的 HTML 標籤並一一說明作用。

標記定義一篇文章
標記定義外部的可互動的內容或外掛比如 flash
標記定義有標記的文字 (黃色選中狀態)

請問什麼是盒模型（box modal）

每一個元素都可視為盒模型
盒模型由 content、padding、border、margin 組成
- content：要放的內容物
- padding：內距，內容物跟 border 的距離，換句話說，在元素內容的周圍加上我們所指定大小的空間；而如果我們沒有指定元素的寬高時，那麼該元素的內容就會受到 padding 所擠壓
- border：邊框，盒模型的最外框，計算元素實際的寬高時，一定要將 border 納入
- margin：元素與其他元素間的邊界距離

請問 display: inline, block 跟 inline-block 的差別是什麼？

塊級元素：佔領頁面的一行，之後的塊級元素自動換行，可設定寬高、margin、padding 等，但設置後也同樣佔一行。
行級元素：和其他元素在同一行，寬高不可設定，寬高由內容由內容元素的寬高決定，多個相鄰的行內元素排在同一行裏，直到頁面一行排列不下，才會換新的一行。
inline
- 屬於行級元素
- 常見元素： input、img、strong、em
- 使用時機：要讓他跟其他資料一起排列時
block
- 屬於塊級元素
- 常見元素：div、form、p、h1
- 使用時機：自成一橫列，不與其他元素做排列，想做比較重要的訊息或較顯眼的資訊時
inline-block
- 上面兩者優點混合
- 可在同一行內做元素寬高的設定、同時可以一起做排列，block 的寬度高度特性 + inline 的同行特性
- 使用時機：導覽列

請問 position: static, relative, absolute 跟 fixed 的差別是什麼？

static
- 預設定位，無法定義 top、left、bottom、right、z-index
- 使用時機：一般狀況
relative
- 元素與 static 位置相同 (元素實際還是在 static 的位置，並非偏移過後的位置)
- 可定義 top、left、bottom、right、z-index
  - right 40px 相對於原本的位置，向右移動 40px
- 使用時機：把 static 改成 relative 以達到讓 absolute 或是 relative 追蹤的效果
absolute
- 移出資料流，做獨立編排。將預設的 static 設為 absolute，他就會往外層元素找 position:absolute|fixed |relative 的元素，若是都沒有就會以該網頁頁面 body 的左上角為定位點
- 可設定 top、left、bottom、right，移動方式同 relative
- 使用時機：跳出廣告關閉的 XX 按鈕
fixed
- 移出資料流，以目前瀏覽器視窗定位，固定在視窗固定位置，不隨滾動捲軸移動，
- 使用時機：廣告或彈出視窗

實做一個活動報名表單

新拖延運動

HTML 部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
    />
    <title>新拖延運動報名表單</title>
  </head>
  <body>
    <div class="body__wrapper">
      <div class="form">
        <div class="wrapper">
          <h1 class="title">新拖延運動報名表單</h1>
          <div class="title__desc">
            <p>活動日期：2020/12/10 ~ 2020/12/11</p>
            <p>活動地點：台北市大安區新生南路二段1號</p>
            <div class="must">* 必填</div>
          </div>
        </div>

        <div class="wrapper">
          <div class="name">
            <div class="sub__title required">暱稱 </div>
            <input name="name" class="input__space" placeholder="您的回答" />
          </div>
          <div class="email">
            <div class="sub__title required">電子郵件 </div>
            <input name="email" class="input__space" placeholder="您的電子郵件" />
          </div>
          <div class="phone">
            <div class="sub__title required">手機號碼 </div>
            <input name="phone" class="input__space" placeholder="您的手機號碼" />
          </div>
          <div class="type">
            <div class="sub__title required">報名類型 </div>
            <label>
              <input 
              type="radio"
              name="option"
              value="bed"
            /> 躺在床上用想像力實作
            </label>
            <br /><br />
            <label>
              <input 
              type="radio"
              name="option"
              value="floor"
            /> 趴在地上滑手機找現成的
            </label>
          </div>
          <div class="know">
            <div class="sub__title required">你怎麼知道這個活動的？ </div>
            <input name="know" class="input__space" placeholder="您的回答" />
          </div>
          <div class="other">
            <div class="sub__title">其他 </div>
            <p>對活動的一些建議</p>
            <input name="answer" class="input__space" placeholder="您的回答" />
          </div>
          <div class="submit">
            <button type="submit">提交</button>
            <p>請勿透過表單送出您的密碼。</p>
          </div>
        </div>
      </div class="form">
    </div>
    <footer class="footer">
        <p>© 2020 © Copyright. All rights Reserved.</p>
    </footer>
  </body>
</html>

CSS 部分：

* {
  margin: 0;
  padding: 0;
  font-family: MicrosoftJhengHei, sans-serif;
  /* border: 1px solid green; */
}
body {
  background: #eee;
}
button {
  background: #fad312;
  padding: 13px 31px 13px 32px;
  border-radius: 3px;
  border: none;
  letter-spacing: 1px;
}
.other p {
  margin-bottom: 20px;
}
.submit p {
  margin-top: 15px;
}
.title__desc {
  margin-top: 30px;
}
.title__desc p {
  margin-bottom: 8px;
}
.body__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100px 50px 100px 50px;
}
.form {
  background: #ffffff;
  border-top: 7px solid #fad312;
  box-shadow: 1.8px 2.4px 5px 0px rgba(0, 0, 0, 0.3);
  width: 645px;
}
.wrapper {
  margin: 30px;
}
.name,
.email,
.phone,
.type,
.know,
.other,
.submit {
  margin-bottom: 60px;
  letter-spacing: 1px;
  font-weight: 200;
}
.name {
  padding-top: 20px;
}

.sub__title {
  margin-bottom: 13px;
  font-weight: 400;
  font-size: 20px;
}
.must {
  margin-top: 25px;
  color: #e74149;
  font-size: 16px;
  font-weight: 400;
}
.input__space {
  width: 280px;
  height: 23px;
  border: 1px solid #d0d0d0;
}
::placeholder {
  color: #d0d0d0;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #999999;
  font-size: 13px;
  padding: 18px 0;
  margin-top: 70px;
}
.required:after {
  content: "*";
  color: #e74149;
}
@media (max-width: 768px) {
  .wrapper {
    margin-left: 20px;
  }
}

剛開始接觸切版，一切都還不是那麼熟練，接下來會開始實做功能部分，例如表單驗證等功能，上述如有缺漏，歡迎告訴我！