Day13 | 那些當助教遇到的問與答

發表於 2023-03-29 分類於 HTML&CSS

HTML & CSS 的一些問與答

前言

很榮幸之前有當過幾個月六角學院 HTML & CSS 線上問答助教一小段時間，這邊整理出幾個自己印象比較深刻的問題。

❒ margin:0 auto; 與 margin:auto; 差異

下方 auto 的意思指剩下可用空間。

margin:0 auto; 表示平均分配左右空間，上下空間為 0。
margin:auto; 表示平均分配上下與左右空間。
以 margin-left:auto; 為例，可讓區塊靠右對齊，因為 left 把剩餘的空間拿走。

根據規範，margin-top: auto; 和 margin-bottom: auto; ，其計算值為 0。所以 margin:auto; 與 margin:0 auto; 視覺上呈現會是一樣的。

參考資訊：

margin：auto 与 margin：0 auto 区别

❒ margin:0 auto; 與 text-align:center 差異

CodePen 範例

區塊內的所有文字或行內元素（例如：標題標籤、a 標籤、img 標籤）都可使用 text-align 做調整。
margin:0 auto; 是讓區塊本身置中。

參考資訊：

六角學院 - 使用 HTML、CSS 開發一個網站 | text-align 文字水平調整

❒ 關於 font-family

1
2
3

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

預設字體中包含 Mac 與 Windows 的系統字。
- 電腦使用自己的系統字支援好、瀏覽性好、載入速度也會比較快。
順序由左至右，電腦依序從左至右查詢支援的字體，不支援的字體會跳過繼續往右邊找。
微軟正黑體請以英文 " Microsoft JhengHei " 取代中文，避免錯誤。
一定要加上 sans-serif 無襯線字體，因為此字體是 Mac 與 Windows 都支援的字體，假設前方系統字都沒有，至少還有sans-serif 可支援。
font-family 字體名稱中有空白或是中文，需用單引號 '' 或雙引號 "" 將它括起來，避免發生錯誤。

參考資訊：

❒ font-family 寫於 * 星號無效 ?

* 星號設定 font-family ，但頁面沒有吃到是因為 CSS Reset 中 font: inherit; 的關係。
* 星號 CSS 選擇器權重為 0 ，因此會被 CSS Reset 的 font:inherit; 給覆蓋。所以可把 font-family 寫於 html,body 內，如下：
1
2
3
html, body {
font-family: ...;
}

參考資訊：

CSS选择器与选择器权重

❒ CSS 的 body 設定

寬度與版型置中建議寫於 body 下的子層，直接寫於 body 會降低整體網頁彈性。body 的設定較常用於字型樣式設定。
背景色的部分也建議寫於 body 下的子層 ( 例如 .wrap )，一個專案內可能不同頁面會設定不同的背景色，所以可用 .wrap 包覆寫外層，但字體樣式基本上全站都會一樣，所以可以寫於 body。
1
2
3
<body>
<div class="wrap"></div>
</body>

❒ 把 CSS 寫於 HTML 與外部載入差異 ?

HTML 套用 CSS 的方法有三種：

行內
- 使用 style 方式寫入標籤中。
HTML 內部載入
- 把樣式直接寫在 <head> 內。
外部載入
- 把樣式寫在外部 .css 檔案中，再到 HTML 的 <head> 中使用 <link rel="stylesheet" href="xxx.css"> 載入此檔案。

如果直接於 HTML 把 CSS 撰寫在裡面，內容一多，很容易頁面會變非常長，修改維護都會不方便。所以一般 HTML 都會使用從外部載入 CSS 的方式，除了 HTML 頁面會比較乾淨，日後維護管理都會比較方便唷 !
關於 HTML 套用 CSS 三種方法的優先順序可參考此文章： CSS的優先順位

❒ flex 與 float 差異 ?

float 與 flex 相似處為在父層各自使用 float 與 flex 皆可讓子層元素靠左或靠右移動，但 flex
的運用會再更廣一些。
雖然都可以讓元素移動位置，但它們的寫法卻是完全不一樣的， float 因為會讓區塊浮動的關係，所以需要做清除浮動的動作，而 flex 則是使用主軸與交錯軸做控制。
深入解說可參考六角學院共筆部落格中的 “ Flexbox 排版跟 float 差在哪裡 “ 文章

❒ 除了用 Flex 外可讓 h2、span 垂直置中的其他方式？

可使用 inline-block 搭配 vertical-align 的方式，不過還是較推薦使用 flex 排版。CodePen 範例
參考文章 : 難解的 CSS 排版：認識對齊 ( 上 ) 。

另外也可參考筆者鐵人賽中「 Day7 | 垂直置中的一些排版方式」文章

❒ CSS 中 content 屬性問題

content 是 CSS 的一個屬性，常用於 ::before 和 ::after 這二個偽元素中。
把 content 的屬性值設為空字串 → content: ''; ，再搭配其它屬性生成輔助。( 例如圖片取代文字用法 )。

參考資訊 :

小事之 CSS 偽元素與 content Property

❒ 使用 text-orientation 屬性讓文字旋轉

text-orientation 屬性可讓文字旋轉。

參考資訊：

text-orientation

❒ 為什麼 text-decoration 屬性，不要套用到最外層 body 上

會把整個父層 ( 包含此父層下的子元素們 ) 都加上底線，
text-decoration 屬性定義比較特別，所以建議把它套用到 body 內的其它子層元素上，例如 h1 、 p 段落。

上方解說須重構

text-decoration 屬性定義比較特別，不要套用到最外層的 body 上，請直接套用於要使用的那個元素上，不然套用的那個元素內如果還有其他子元素，都會一起套用 text-decoration 的設定。( 要多繞口 )

範例：

CodePen 範例

父層 .wrap 使用 text-decoration: line-through; 可見子層 .inWrap 使用 text-decoration: none; 無效。
試試把範例中的 body 註解，可見 body 下的所有元素都會吃到 text-decoration。

參考資訊：

CSS 搞怪的 text-decoration

❒ hr 標籤用法

hr 標籤是段落焦點轉換，比較適合用在 A 區塊轉到 B 區塊之間，如果是像標題下的線條，是偏向裝飾用的話，就建議用 border 來處理，像設計稿中「個人資料」下方銜接內容中間的線條就較適合使用 border-bottom 屬性。

參考資訊：

MDN web docs -

ㄒ解決選單中滑鼠滑入時 a 連結產生的跳動感

CodePen 範例

可於 a 連結設定透明的 border-bottom，可避免 a 連結 hover 時產生的高度變化。

❒ :root 選取器

對 HTML 來說 :root 為 <html> 元素，除了優先級更高外功能與 html 選擇器相同。

:root 可搭配 CSS variables ( 變數 ) 使用。

於 :root 建立變數。

於選擇器上套用此變數。

/* 建立變數 */
:root {
 --white-color: #fff;
}
/* 套上變數 */
p {
 color: var(--white-color);
}

參考資訊：

:root 根目錄選取器 - 叫你阿爸出來講

❒ linear-gradient 的漸層效果

➊ 基本寫法：

但此寫法方向就是固定從上至下 ( 起始色 → 結束色 )，無法控制方向。

1	background: linear-gradient(起始色彩, 結束色彩);

➋ 可控制方向的寫法：

因有些舊瀏覽器沒有支援 linear-gradient，所以需於前方加入前綴詞。如果沒有加前綴詞就需於方向前加上 to。

語法：

前綴詞

background: -webkit-linear-gradient(left ,red,orange,yellow,green,blue,purple);
background: -o-linear-gradient(left ,red,orange,yellow,green,blue,purple);
background: -moz-linear-gradient(left ,red,orange,yellow,green,blue,purple);
background: linear-gradient(left ,red,orange,yellow,green,blue,purple);

加上 to：linear-gradient(方向性, 色彩);

1
2
3

linear-gradient(to left top, blue, red);

/* 方向一般由上至下 */

➌ 可控制漸層色的角度寫法：

方向性 : 上至下方。
單位角度：deg 。
起始色與結束色位置的單位：％
色彩：也可使用 rgba，前三個值為 rgb，最後一個值為透明度 ( 0~1 )。如果要插入多個色彩可使用逗號隔開。
語法一：linear-gradient(角度, 起始色彩 , 結束色彩 );
- 設定一個由 “ 上淺黑至下深黑 “ 的漸層背景。CodePen 範例
語法二：linear-gradient(角度, 起始色彩起始色彩位置, 結束色彩結束色彩位置);
- 雙色背景斜角度效果，可試試看調整顏色後方 % 數值。 CodePen 範例
語法三：linear-gradient(角度, 起始色彩起始色彩位置, 中間色彩中間色彩位置, 結束色彩結束色彩位置);
- 雙色背景斜角效果，因為語法二的方式無法調整紅色部分長度 ( 縮小紅色數值會變漸層色 )，所以使用語法三來調整，讓中間色與結束色數值設定相同即可。CodePen 範例

background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
background: linear-gradient(135deg, red 50%, yellow 50%);
background: linear-gradient(
    163deg, 
    red 2%, 
    red 40%, 
    yellow 40%
  );

參考資訊：