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

前言

很榮幸之前有當過幾個月六角學院 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: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 Resetfont: inherit; 的關係。

  • * 星號 CSS 選擇器權重為 0 ,因此會被 CSS Reset 的 font:inherit; 給覆蓋。所以可把 font-family 寫於 html,body 內,如下:

    1
    2
    3
    html, body { 
    font-family: ...;
    }

參考資訊:

❒ CSS 的 body 設定

  • 寬度與版型置中建議寫於 body 下的子層,直接寫於 body 會降低整體網頁彈性。body 的設定較常用於字型樣式設定。

  • 背景色的部分也建議寫於 body 下的子層 ( 例如 .wrap ),一個專案內可能不同頁面會設定不同的背景色,所以可用 .wrap 包覆寫外層,但字體樣式基本上全站都會一樣,所以可以寫於 body。

    1
    2
    3
    <body>
    <div class="wrap"></div>
    </body>

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

HTML 套用 CSS 的方法有三種:

  1. 行內
    • 使用 style 方式寫入標籤中。
  2. HTML 內部載入
    • 把樣式直接寫在 <head> 內。
  3. 外部載入
    • 把樣式寫在外部 .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 垂直置中的其他方式?

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

❒ CSS 中 content 屬性問題

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

參考資訊 :

❒ 使用 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

參考資訊:

❒ hr 標籤用法

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

參考資訊:

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

CodePen 範例

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

❒ :root 選取器

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

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

    • :root 建立變數。

    • 於選擇器上套用此變數。

      1
      2
      3
      4
      5
      6
      7
      8
      /* 建立變數 */
      :root {
      --white-color: #fff;
      }
      /* 套上變數 */
      p {
      color: var(--white-color);
      }

參考資訊:

❒ linear-gradient 的漸層效果

基本寫法:

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

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

可控制方向的寫法:

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

語法:

  • 前綴詞

    1
    2
    3
    4
    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);
  • 加上 tolinear-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 範例
1
2
3
4
5
6
7
8
9
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%
);

參考資訊: