CSS初始化原理 CSS初始化是為了在不同的瀏覽器和操作系統(tǒng)下，保證網(wǎng)頁(yè)的樣式表現(xiàn)基本一致。因?yàn)椴煌臑g覽器對(duì)于CSS屬性的默認(rèn)值不同，如果我們不重置這些差異，那么在不同瀏覽器下的頁(yè)面，呈現(xiàn)的樣式會(huì)有很大差異。下面我們會(huì)介紹常見(jiàn)的CSS初始化方法。 1. Eric Meyer Reset 這個(gè)是最早出現(xiàn)的重置方法，它通過(guò)明確的設(shè)定所有元素的樣式，來(lái)消除默認(rèn)樣式。 ```html

* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* 可選的重置項(xiàng) */
/* 導(dǎo)致更多瀏覽器的一致性問(wèn)題 */
/* 這里只列舉一部分 */
a,button,input {
vertical-align: baseline;
}
input {
font-family: inherit;
font-size: 100%;
line-height: normal;
}
...

``` 2. Normalize.css Normalize.css是一個(gè)非常流行的CSS初始化文件。與Eric Meyer Reset不同的是，Normalize.css通過(guò)把樣式重置到一組比較現(xiàn)代的默認(rèn)值，來(lái)確保所有元素在不同瀏覽器下看起來(lái)相似。 ```html

html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-family: sans-serif;
font-size: 16px;
}
...

``` 3. CSS Box Sizing 在默認(rèn)情況下，盒子模型的邊框和內(nèi)邊距會(huì)增加元素的寬度和高度，這可能導(dǎo)致我們?cè)谶M(jìn)行布局時(shí)更難計(jì)算。為了使盒子模型的寬度和高度包括邊框和內(nèi)邊距，我們可以使用CSS Box Sizing。 ```html

* {
box-sizing: border-box;
}
...

``` 總結(jié) CSS初始化對(duì)于網(wǎng)絡(luò)開(kāi)發(fā)來(lái)說(shuō)非常重要。通過(guò)重置所有元素的默認(rèn)樣式，我們可以確保在不同瀏覽器、不同操作系統(tǒng)和不同設(shè)備下，網(wǎng)站看起來(lái)是一致的。雖然不同的初始化方法存在一些細(xì)微的差異，但是基本原則都是一樣的。