在進(jìn)行網(wǎng)頁布局的時(shí)候,我們經(jīng)常會(huì)需要對網(wǎng)頁進(jìn)行各種樣式的設(shè)置。但是,我們會(huì)遇到一個(gè)問題:網(wǎng)頁在默認(rèn)情況下已經(jīng)有了一些 CSS 樣式,有些屬性可能會(huì)與我們設(shè)置的樣式?jīng)_突,導(dǎo)致網(wǎng)頁展示不出我們想要的樣子。那么,該怎么辦呢?
答案就是清除默認(rèn)樣式。在進(jìn)行 CSS 布局的時(shí)候,我們需要將網(wǎng)頁的默認(rèn)樣式清除干凈,才能更好地進(jìn)行樣式設(shè)置。這里介紹兩種最常用的清除默認(rèn)樣式的方法:
* { margin: 0; padding: 0; border: 0; font-size: 100%; font-family: inherit; vertical-align: baseline; }
第一種方法,就是使用上面這段代碼進(jìn)行全局樣式重置。將所有標(biāo)簽的內(nèi)邊距(padding)、外邊距(margin)和邊框(border)清零,將字體大小(font-size)、字體樣式(font-family)和垂直對齊方式(vertical-align)設(shè)置為默認(rèn)值,這樣可以避免瀏覽器默認(rèn)樣式的影響。
html,body{ margin: 0; padding: 0; border: 0; height: 100%; font-size: 14px; color: #333; font-family: "Microsoft Yahei", sans-serif; }
第二種方法,就是使用上面這段代碼對html
和body
元素設(shè)置樣式。同樣地,將內(nèi)邊距、外邊距和邊框清零,將字體大小、顏色和字體樣式設(shè)置為默認(rèn)值。此外,還將html
和body
的高度(height)設(shè)置為 100%,這是為了避免在頁面中出現(xiàn)頂部或底部留白的情況。
總之,在進(jìn)行 CSS 布局時(shí),清除默認(rèn)樣式是很重要的,這樣我們才能更加方便地進(jìn)行樣式的設(shè)置和布局的排版。