當我們在編寫CSS樣式時,我們經常要面對一個問題:如何消除默認樣式。下面我們來介紹幾種常見的方法。
/* 一、使用通配符,設置所有元素的樣式 */ * { margin: 0; padding: 0; }
這種方法會將所有元素的margin和padding都設置為0,從而消除掉默認樣式。但是可能會對某些元素造成影響,不夠靈活。
/* 二、使用reset樣式表 */ /* 重置所有元素的樣式 */ html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,em,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary, time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display: block; } /* 去掉鏈接的下劃線 */ a { text-decoration: none; }
這種方法采用重置所有元素的樣式的方式,同樣可以消除默認樣式,而且比第一種方法靈活性更強,可以更加精細地控制元素的樣式,不過需要引入reset樣式表。
/* 三、使用normalize.css */ /* normalize.css是一份用于統一不同瀏覽器的默認樣式的CSS文件 * 引用normalize.css文件,在CSS文件中不需要再針對不同瀏覽器寫不同的樣式,節省代碼量 */
normalize.css是一種常見的去除默認樣式的方法,它使用較為先進的CSS技術,可以統一不同瀏覽器的默認樣式,而且還可以避免一些常見的瀏覽器兼容性問題,但需注意引用方式。
以上幾種方法都可以消除默認樣式,但不同場景下需要選用不同的方法,以達到最佳效果。