在我們進行網頁設計時,經常會遇到一些元素的樣式不符合我們的要求,這時候就需要對這些元素進行樣式重置。而重置樣式css是基于瀏覽器默認樣式的一種統一樣式處理方法,可用于清除所有瀏覽器的默認樣式和統一元素的樣式表現。
那么,該如何進行樣式重置呢?一種常用的方法是使用標準的 reset.css 文件。阮一峰老師在他的博客中講解了一份常用的 reset.css 文件。
/* html5doctor.com Reset Stylesheet */
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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, 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;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
這個文件中使用了*通配符來匹配所有元素,并去掉了所有默認的margin、padding、border、font-size等屬性,以及重置了列表、引號、表格等元素的樣式。此外,它還加入了HTML5新增元素和一些可選的CSS3屬性。
需要注意的是,如果只是想去掉一些元素的默認樣式,而不是完全重置所有樣式,就要使用更為精細的選擇器,避免使用通配符 *,減少樣式沖突,并注意各個瀏覽器之間的差異。
上一篇mui加上vue