《前后端面試題》專欄集合了前后端各個知識模塊的面試題，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面試題-專欄總目錄

一、本文面試題目錄

21. 解釋nth-child()偽類。

答：nth-child(n)選擇器用于匹配其父元素下的第n個子元素。可以使用公式如even, odd, 或者更復雜的表達式如2n+1來選擇特定模式的子元素。例如：

li:nth-child(2n) { background-color: lightgray; } /* 選擇偶數項 */

22. 如何創建一個三角形？

答：可以通過設置寬高為0，并利用邊框顏色和透明度來創建視覺上的三角形效果。例如，創建一個向右的三角形：

.triangle {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 100px solid black;
}

23. transform屬性的主要用途是什么？

答：transform屬性允許對元素執行旋轉、縮放、傾斜或平移操作。例如：

div {transform: rotate(45deg); /* 順時針旋轉45度 */
}

24. transition與animation有何區別？

答：transition用于在狀態改變時創建平滑過渡效果，適用于簡單的動畫；而animation提供了更強大的功能，可以定義多個關鍵幀，創建復雜的動畫序列。例如：

/* transition */
button:hover { transition: all 0.3s ease; }/* animation */
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}
element { animation: bounce 2s infinite; }

25. 解釋keyframes。

答：@keyframes規則用于定義動畫的關鍵幀集合，描述動畫從開始到結束的變化過程。例如：

@keyframes slidein {from { margin-left: 100%; width: 300%; }to { margin-left: 0%; width: 100%; }
}

26. 如何讓背景圖片固定不動？

答：使用 background-attachment: fixed; 屬性可以讓背景圖片相對于視口固定，不會隨頁面滾動而移動。例如：

body {background-image: url('image.jpg');background-attachment: fixed;
}

27. 解釋linear-gradient函數。

答：linear-gradient()函數用于創建線性漸變背景，可以從一個顏色平滑過渡到另一個顏色。例如：

div {background: linear-gradient(to right, red, yellow);
}

28. 什么是偽類和偽元素？

答：偽類（如:hover）用于定義元素的狀態（如懸停狀態），而偽元素（如::before）用于插入虛擬內容或選擇元素的部分內容（如首字母）。例如：

a:hover { color: blue; } /* 偽類 */
p::first-letter { font-size: 2em; } /* 偽元素 */

29. 如何在CSS中實現圓角？

答：使用 border-radius 屬性可以輕松地給元素添加圓角。例如：

div {border-radius: 10px; /* 所有角均為10px的圓角 */
}

30. 解釋box-shadow屬性。

答：box-shadow屬性用于給元素添加陰影效果，可以設置水平偏移、垂直偏移、模糊半徑、擴散半徑及顏色。例如：

div {box-shadow: 10px 10px 5px gray;
}

---

No.	大劍師精品GIS教程推薦
0	地圖渲染基礎- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入門教程】 - 【源代碼+示例 300+】
2	Leaflet 【入門教程】 - 【源代碼+圖文示例 150+】
3	MapboxGL【入門教程】 - 【源代碼+圖文示例150+】
4	Cesium 【入門教程】 - 【源代碼+綜合教程 200+】
5	threejs【中文API】 - 【源代碼+圖文示例200+】

---

31. 在CSS中如何使用變量？

答：通過CSS變量（也稱為自定義屬性），例如：

:root {--main-bg-color: #4d4e53;
}
body {background-color: var(--main-bg-color);
}

32. 解釋一下calc()函數的作用。

答：calc()函數允許你在CSS中執行簡單的數學運算來確定屬性值。例如：

div {width: calc(100% - 100px); /* 寬度為100%減去100px */
}

33. 在CSS中如何設置字體圖標？

答：通常使用Web字體（如Font Awesome）并通過@font-face引入，然后使用偽元素或直接在HTML中添加相應的類名來顯示圖標。例如：

@font-face {font-family: 'FontAwesome';src: url('fontawesome-webfont.eot');
}
.icon {font-family: 'FontAwesome';content: "\f007"; /* 顯示特定圖標 */
}

34. 什么是CSS Sprites？它們的好處是什么？

答：CSS Sprites是一種將多個小圖標合并成一張大圖的技術，減少HTTP請求次數，從而提高頁面加載速度。好處包括減少服務器負載和加快頁面渲染速度。

35. 解釋content屬性的作用。

答：主要用于:before和:after偽元素中，用于插入生成的內容。例如：

span::before {content: "Before ";
}

36. 什么是CSS Reset和Normalize.css？

答：CSS Reset清除瀏覽器默認樣式，使所有瀏覽器的默認樣式一致；而Normalize.css保留有用的默認樣式并標準化不同瀏覽器之間的差異，提供更一致的基礎。

37. 如何實現垂直居中的布局？

答：可以使用Flexbox (align-items: center; justify-content: center;) 或者Grid (place-items: center;) 等方法。例如：

.container {display: flex;align-items: center;justify-content: center;height: 100vh;
}

38. 解釋inherit, initial, 和 unset 關鍵字的區別。

答：inherit繼承父級屬性值；initial重置為默認值；unset如果屬性可繼承則表現如同inherit，否則如同initial。例如：

div {color: unset; /* 根據上下文決定是否繼承 */
}

39. 如何創建一個帶有圓角和陰影效果的按鈕？

答：結合border-radius和box-shadow屬性，例如：

button {border-radius: 5px;box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);padding: 10px 20px;
}

40. 解釋flex-grow, flex-shrink, 和 flex-basis？

答：這些是Flexbox中的屬性：

• flex-grow：定義項目的放大比例，默認為0。
• flex-shrink：定義項目的縮小比例，默認為1。
• flex-basis：定義項目的基礎大小，默認為auto。例如：

.item {flex-grow: 1;flex-shrink: 1;flex-basis: auto;
}

二、140道面試題目錄列表

文章序號	CSS面試題140道
1	CSS面試題及詳細答案140道（1-20）
2	CSS面試題及詳細答案140道（21-40）
3	CSS面試題及詳細答案140道（41-60）
4	CSS面試題及詳細答案140道（61-80）
5	CSS面試題及詳細答案140道（81-100）
6	CSS面試題及詳細答案140道（101-120）
7	CSS面試題及詳細答案140道（121-140）