在前端開發(fā)中，CSS 是不可或缺的一部分。在日常工作中，如何更加高效地使用 CSS 呢？這里為大家介紹 CSS 訓(xùn)練 100 個技巧。 1. 選擇器優(yōu)化 過多的選擇器會增加渲染時間和加載時間。優(yōu)化選擇器能讓網(wǎng)站更加流暢。 ```html

/* 不要使用如下選擇器，會降低網(wǎng)站性能 */
a[class^="nav"]
span[class$="title"]
a[href*="twitter"]
/* 使用 class 選擇器代替 */
.nav-link
.title
.twitter-link

``` 2. 相對尺寸 使用相對尺寸，如 em、rem 可以讓網(wǎng)站更靈活，也方便切換樣式風(fēng)格。 ```html

/* 相對尺寸 */
h1 {
font-size: 2rem;
}
/* em */
.article {
padding: 1em 2em;
}

``` 3. 雪碧圖 將多個小圖片合并成一張圖片，減少請求次數(shù)，進(jìn)而縮短加載時間。 ```html

/* 將多個圖片合成一個圖 */
.icon1 {
 background: url("images/my-sprite.png") -70px -200px no-repeat;
 width: 30px;
 height: 30px;
}

``` 4. CSS 預(yù)處理器 例如 Sass、Less 等，它們能夠增加代碼的復(fù)用性，編寫起來也更加方便。 ```html

/* 使用變量 */
$primary-color: #0f4c81;
nav {
background-color: $primary-color;
}

``` 5. 盒模型 在開發(fā)網(wǎng)站時，不同的盒模型對 CSS 的編寫會有影響。 ```html

/* border-box */
盒子寬度 = 元素寬度 + border + padding
.box {
box-sizing: border-box;
width: 200px;
border: 2px solid #ccc;
padding: 10px;
}
/* content-box */
盒子寬度 = 元素寬度
.box {
box-sizing: content-box;
width: 200px;
border: 2px solid #ccc;
padding: 10px;
}

``` 6. CSS 前綴 瀏覽器在支持一些新的 CSS 特性時，需要加上瀏覽器前綴。 ```html

.box {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

``` 7. CSS reset 不同的瀏覽器對默認(rèn)樣式的支持不同，使用 CSS reset 可以統(tǒng)一元素的默認(rèn)樣式。 ```html

/* reset */
* {
margin: 0;
padding: 0;
}

``` 8. CSS 動畫 使用 CSS 動畫可以增加網(wǎng)站的交互性，提高用戶體驗。 ```html

.box {
transition: all 0.5s ease;
}
.box:hover {
transform: scale(1.1);
}

``` 9. 文本樣式 使用 CSS 可以自定義字體、顏色、樣式等，增加文本的可讀性。 ```html

/* 字體 */
body {
font-family: "Microsoft YaHei", sans-serif;
}
/* 顏色 */
h1 {
color: #333;
}
/* 文本樣式 */
a {
text-decoration: none;
font-weight: bold;
}

``` 10. flexbox 使用 flexbox 可以快速實現(xiàn)彈性布局，適用于不同屏幕大小的設(shè)備。 ```html

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

``` 以上分享的技巧只是 CSS 訓(xùn)練的冰山一角，CSS 技巧數(shù)不勝數(shù)，可以多多實踐，提高自己的技術(shù)。