CSS 基本手冊

tags: 程式導師 css

完全跟著 Amos 的金魚系列做的 CSS 筆記。

CSS Reset

為什麼需要 CSS Reset？
因為各個不同的瀏覽器，自帶有不同的 CSS 預設樣式（外觀），所以在寫網頁前，需要先做 CSS Reset，確保掌握頁面中的各種元素樣式，不會被瀏覽器預設樣式打擾。

如何使用 CSS Reset？

1. 到 Meyerweb.com 大神的網站中，找到 CSS Tool/ Css Reset，複製裡面的 CSS 碼。
2. 在自己的網頁專案內，新建立一個 CSS 檔案 reset.css，並將複製的 CSS 貼上。
3. 在 html 檔案內引用 reset.css 即可重置整個頁面的 css 樣式。

不讓 CSS Reset 太激進：CSS Normalize
因為使用 CSS Reset 會讓整個網頁預設樣式歸零，因此所有的字體、行距、字距等都會是一樣的，沒有任何差別，但這在實作專案時，可能會遇到些小問題（這個可能要到實作後，才會遇到）。因此實作中，較常使用的是「CSS Normalize」，Normalize 的方法有很多套，Normalize.css 是其中一套，端看公司內部是怎麼規定的。

延伸閱讀

• Day21：小事之 CSS Reset 與 CSS normalize by 小艾

Box Model

預設情況下的物件總寬度是如何組成

• Total width = width + padding + margin + border
• 可見尺寸：border、border、padding

新盒子：box-sizing

Box-sizing 是用來指定 width 的劃定範圍

• box-sizing: border-box total width 的範圍是到兩邊的 border。
• box-sizing: content-box total width 的寬度只有物件的內容物。

Display 排版

• inline-block
• Float vs Flex

在排版的時候，通常會在內容物外以一個 div，class name 是 wrap 或 container ，把內容包起來。

inline-block

• block 會自己佔據整列空間，能設定高度，具備 block 性質的物件有
  • <div>
  • <p>
  • <h1>
  • <ul>
  • <li>
  • <img>
• inline 會跟大家排列在一起，不能設定高度，具備 inline 性質的物件有
  • <span>
• inline-block 能跟大家排列在一起，能設定高度。

使用 inline-block 要注意「空白字問題」，會讓物件之間出現莫名的空白處，所以要搭配 font-size: 0 把物件間的空白處消除。

Float

Float 屬於較資深的排版方法，新出的排版方式還有 Grid 或 Flex-box。
Float 的參數只有靠左（left）或靠右（right）。

如果 A 物件（子層）是撐開 B 物件（父層）的，當 A 物件設定成 float，代表撐開 B 物件的物件已不在，就會回到被撐開的狀態前。所以就需要多設定一個 div，利用 css 屬性 clear，讓父層能抓到子層的高度。

Q: <em> 跟 <strong> 的差別

😍 Flex

比 float 易用的排版方法，使用的時候要特別注意瀏覽器的版本，Microsoft 系版本的舊瀏覽器可能不支援 flex 排版方法。

如何使用 flex？

1. 用在內容的外層，用一個 div 包覆起來，通常這個 div 的 class name 會被命名為 wrap 或 container。
2. 設定 wrap 或 container div 為 display: flex。

Flex 的效果

• 會自動將 wrap 或 container div 內的物件分配寬度，讓物件等寬，且不會超出 div 寬度。
• 通常用來快速切出欄位。
• 如果要讓物件換行排列，就使用 flex-wrap: wrap。

延伸閱讀

• 玩轉 CSS Flex by CSSCoke Amos
• A Complete Guide to Flexbox by CSS Tricks

Position 定位

CSS 定位的意思是指，網頁中的**物件要依據「誰」**來對齊或選定位置？CSS 定位方式有五種，分別是

1. static
2. relative
3. Absolute
4. sticky
5. fixed

position: fixed

• 使用這個定位方式的物件，會依據「瀏覽器視窗」來定位，物件會獨立成一塊，不會跟其他物件的版位推擠。
• 使用 fixed 的話，物件的 width 要設定成 100%，不然寬度會縮短。

利用 position: fixed 垂直置中

.object {
	position: fixed;
	top: 0;
	bottom: 0;
	margin: auto;
}

利用 position: fixed 水平置中
只比垂直置中的方式，多增加 left 跟 right 的參數設定而已。

.object {
	position: fixed;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0
}

position: relative

相對定位，指的是物件會相對於自己在頁面中的「原位置」，在不影響其他物件的情況下，進行偏移。如果物件沒有偏移位置，就不會看見 position: relative 的效果，這也是常常覺得有 relative 但畫面沒差別的原因。

• 有設定 relative 定位的物件，會蓋住其他物件。
• 如果兩個物件都有設定 relative 定位，後出現的物件會蓋住前物件。
• 使用 z-index 可以改變物件所在的畫面層級。

補充：left, right, top, bottom, z-index，這些參數要在物件有設定 position 的情況下，才會發生作用。

position: absolute

絕對定位，會根據最先碰到，且具備 fixed 或 relative 或 absolute 三者之一的 position 性質的父層，來對齊。

特性

• 會將有 absolute 的物件從資料頁面中抽掉（跟 fixed 物件被獨立出來的效果一樣）
• 如果父層物件都沒有具備 fixed、relative、absolute 三種 position 性質，物件會對視窗做定位，且只定位一次，當滾動視窗後，物件不會跟著調整位置。

動畫效果

• transition
• animation

Transition

transition: 屬性, 轉換時間, 延遲動畫執行的時間, 速度
可製造出平順轉變的效果，且能寫入多組動畫組合：transition: background-color, 2s; color, .3s

Animation

animation: 動畫名稱, 執行時間, 延遲執行的時間, 速度, 次數, 方向, 填充模式, 播放狀態

可自行調控的動畫細節比 transition 多，其中「延遲執行的時間」參數，指的是要讓物件等多久才開始執行動畫。

如何使用 animation？

1. 先設定關鍵影格 @keyframes
2. 再選角，選擇要讓哪個物件執行動畫關鍵影格

關鍵影格的概念，要想成是影片的時間軸，0% 代表在影片一開始，100% 代表在影片結尾。

@keyframes animate{
	0% { border-radius: 50%;}
	100% { border-radius: 0%;}
}

.object {
	animation: animate, 2s;
}

/*以上寫法就能讓 object 物件執行動畫*/

/*基本寫法*/
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

RWD

Media Rule

為不同裝置應用不同的樣式，讓網頁透過偵測不同的螢幕寬度，顯示出對應的樣式。

如何使用 media rule？

1. 在 head 中插入 <meta name="viewport" content="width-device-width, initial-scale=1.0, shrink-to-fit=no">，viewport 的作用是指定視窗的縮放模式。
2. 在 css 樣式表中寫下 @media screen and (條件) and (條件) { }
   • screen 是指定裝置為「螢幕」
   • 條件可以有很多個

例如要表示當裝置是 screen，且螢幕大於等於 768px 的情況，通常大於等於 768px 言下之意就是，在電腦或平板的情況

@media screen and (min-width: 768px) {
	<在這情況要顯示的樣式>
}

延伸閱讀

• MDN CSS @media

超重要學習資源大全

史上最完整的新手網頁入門學習地圖 - 金魚都懂的網頁學習路徑懶人包