CSS面試題集錦(1/n)

Wendy Chang

Published in

Wendy Loops

5 min readFeb 7, 2023

1. 請問以下之CSS權重並排序

ID
Class
Element
inline style
!important

基本來說是：!important > inline style > ID > class > element > *

權重

相同權重的話，後寫的可以覆蓋之前寫的。
當兩個選擇器同時作用在同一個元素上時，權重高的優先作用。
*(0–0–0–0)
element(0–0–0–1)
class(0–0–1–0)
ID(0–1–0–0)
inline-style(1–0–0–0)
important誰都壓不過

以上權重可以累加，詳情可以看這篇寫很清楚：https://ithelp.ithome.com.tw/articles/10196454

2. Scss跟Sass的差別？

SASS使用縮排表示結構
SCSS使用花括號{}和分號表示結構;
SASS用 + =表示共用的css屬性
SCSS用@include @mixin表示共用的css屬性

3. 設定元素為display: flex後，哪些屬性會失效？為什麼？

子元素的float
子元素的clear
子元素的vertical-align

4. 舉例垂直水平置中的CSS寫法

flex
絕對定位
子層相對定位
偽元素

https://codepen.io/wendy725/pen/RwBreZV?editors=1100

5. 說明下列 CSS selectors 的差別

div .a.b
div下面的子層(和子子層等)必須同時有.a跟.b才會被選到。
div .a .b
div下面的子層(和子子層等)，有.a，並且.a下的子層(和子子層等)有.b，才會被選到。
div section
div內所有的section tag。
div > section
div下一子層(不含子子層等)的section tag。
div + section
與div同層並且第一個符合條件的元素會被選到。
div ~ section
與div同層、所有符合條件的元素會被選到。

6. font-size 單位 rem 、 em、 % 分別有什麼差別？

px：絕對單位，代表螢幕中每個「點」( pixel )。
em：相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
rem：相對單位，每個元素透過「倍數」乘以根元素的 px 值。
根元素指的是html的font-size，預設值為16px。
%：相對單位，每個子元素透過「百分比」乘以父元素的 px 值。

參考資料：https://www.oxxostudio.tw/articles/201809/css-font-size.html

7. 知道什麼是 CSS reset 嗎？

早期網頁的瀏覽器在渲染HTML和CSS的樣式並不統一，為了統一預設樣式，因此出了CSS Reset以確保預設瀏覽器網頁樣式在各家瀏覽器都會長一樣。

8. box-sizing 的 content-box 和 border-box 差別，預設值為何？

設定一<div>長寬各100px

.box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 10px;
}

在content-box的情況下，100px外會再把border(1px)跟padding(10px)的數值加上去，所以雖然設定是100px的正方形，但實際上看起來會是122*122的正方形。

若加上border-box屬性，border跟padding則會內推，外觀上看起來還是100*100的正方形，也比較好計算。

預設值為content-box。

9. id 跟 class 的差別？id 可以多於一個嗎？

id是獨一無二的，一個元素只能有一個id

//可以這樣寫：
<div id="id1" class="box box1">BOX1</div>

//不能這樣寫
<div id="id1 id2" class="box box1">BOX1</div>

一個頁面只能有一個元素擁有一個id（繞口令嗎）

<div id="id1" class="box box1">BOX1</div>
<div id="id1" class="box box2">BOX2</div>

let click = document.querySelector("#id1");
click.addEventListener("click", function () {
    console.log("click");
});

//只抓得到BOX1

codepen示範

也因此class大多用於style樣式，id多用於JS事件綁定。

參考資料：https://css-tricks.com/the-difference-between-id-and-class/