CSS（Cascading Style Sheets）是一種用于網(wǎng)頁設(shè)計(jì)的樣式表語言，可以控制網(wǎng)頁元素的外觀和布局。下面就是一些關(guān)于CSS的雜點(diǎn)。

/* 1. 使用 !important 時(shí)，應(yīng)該慎重使用 */
div {
color: red !important;
}
/* 2. 避免在復(fù)雜選擇器中使用 universial selector（*）*/
div * {
/* 這會匹配 div 中的所有元素，會降低渲染性能 */
}
/* 3. 讓元素垂直居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 4. 使用媒體查詢實(shí)現(xiàn)響應(yīng)式設(shè)計(jì) */
/* 設(shè)置屏幕寬度小于 768px 時(shí)的樣式 */
@media screen and (max-width: 768px) {
/* ... */
}
/* 5. 避免濫用嵌套選擇器 */
/* 不推薦的方式 */
.container .item .detail p {
/* ... */
}
/* 推薦的方式 */
.detail p {
/* ... */
}
/* 6. 設(shè)置元素不占用空間 */
.element {
position: absolute;
/* ... */
}
/* 7. 遵循 CSS 盒子模型 */
/* 設(shè)置元素寬度和高度時(shí)，應(yīng)該加上 padding 和 border 大小 */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid black;
}
/* 8. 使用 CSS 變量（CSS Variables） */
:root {
--primary-color: #F44366;
--secondary-color: #03A9F4;
}
.button {
color: var(--primary-color);
background-color: var(--secondary-color);
}
/* 9. 使用 flex 布局實(shí)現(xiàn)自適應(yīng)布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
/* 10. 避免在 CSS 中使用 !important */
/* 可以使用 specificity 來覆蓋樣式，而不是使用 !important */
.container div {
color: red;
}
/* 更加具體的樣式 */
.container .item div {
color: blue;
}