css样式重置

最新推荐文章于 2023-03-24 15:14:59 发布

原创最新推荐文章于 2023-03-24 15:14:59 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

css 专栏收录该内容

1 篇文章

订阅专栏

这段内容详细展示了如何进行CSS样式的全局重置，包括消除内外边距、设置默认字体、处理表格和列表的样式，以及HTML5元素的显示方式。此外，还提供了通用的盒模型设置和页面背景颜色设定，确保页面基础布局的一致性和稳定性。

css样式重置代码

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;
}
html, body{
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
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;
}

*{
    box-sizing: border-box;
    font-size: .32rem;
}
html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: #fff;
}