移动端的reset.css

本文详细介绍了如何使用CSS进行页面元素的样式重置,确保跨浏览器的一致性,并遵循一套统一的样式规范,包括字体、边距、填充等属性的设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@charset "utf-8";
html {
    background-color: #fff;
    color: #000;
    font-size: 12px
}

body,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td,
pre,
xmp {
    margin: 0;
    padding: 0
}

body,
input,
textarea,
button,
select,
pre,
xmp,
tt,
code,
kbd,
samp {
    line-height: 1.5;
    font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6,
small,
big,
input,
textarea,
button,
select {
    font-size: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
    font-weight: normal
}

address,
cite,
dfn,
em,
i,
optgroup,
var {
    font-style: normal
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left
}

caption,
th {
    text-align: inherit
}

ul,
ol,
menu {
    list-style: none
}

fieldset,
img {
    border: 0
}

img,
object,
input,
textarea,
button,
select {
    vertical-align: middle
}

article,
aside,
footer,
header,
section,
nav,
figure,
figcaption,
hgroup,
details,
menu {
    display: block
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "\0020"
}

textarea {
    overflow: auto;
    resize: vertical
}

input,
textarea,
button,
select,
a {
    outline: 0 none;
    border: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0
}

mark {
    background-color: transparent
}

a,
ins,
s,
u,
del {
    text-decoration: none
}

sup,
sub {
    vertical-align: baseline
}

html {
    overflow-x: hidden;
    height: 100%;
    font-size: 50px;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
    color: #333;
    font-size: .28em;
    line-height: 1;
    -webkit-text-size-adjust: none;
}

hr {
    height: .02rem;
    margin: .1rem 0;
    border: medium none;
    border-top: .02rem solid #cacaca;
}

a {
    color: #25a4bb;
    text-decoration: none;
}
<think>好的,用户想了解Reset CSS和Normalize CSS的区别及用法。我需要先回顾这两个概念的基本定义和它们在网页开发中的作用。 首先,Reset CSS的目的是重置浏览器默认样式,确保在不同浏览器下元素样式的一致性。常见的做法是将所有元素的margin、padding等归零,比如Eric Meyer的Reset CSS。但这样做可能会带来一些问题,比如所有元素样式都被抹平,需要从头开始定义,增加了工作量,也可能影响某些浏览器内置的合理默认样式[^1]。 然后是Normalize CSS,由Nicolas Gallagher等人开发。它的理念不是完全重置样式,而是保留有用的浏览器默认样式,并修复浏览器间的样式不一致问题。这样做的好处是维护了元素的合理默认值,同时修正了跨浏览器的差异,比如统一标题的大小,修复表单元素的字体继承问题等。 接下来需要考虑用户的使用场景。用户可能是在开发一个需要跨浏览器兼容的项目,或者在优化现有项目的样式统一性。用户可能对浏览器默认样式的影响有基本了解,比如引用[1]提到的浏览器默认样式、框架样式和自定义CSS的关系,所以需要解决方案来处理这些默认样式带来的不一致问题。 用户的需求可能不仅仅是了解两者的区别,还希望知道如何选择和使用。需要比较两者的优缺点,适用场景,以及实际应用中的最佳实践。例如,Reset适合需要完全控制样式的情况,而Normalize适合希望保留合理默认样式并减少重复工作的情况。 可能还需要提到两者的具体用法,比如如何在项目中引入,是否需要结合其他工具或框架。例如,Bootstrap等框架可能有自己的重置策略,这时候是否需要额外使用Reset或Normalize。此外,引用[2]的问题提到margin-top和margin-bottom对内联元素的影响,这可能涉及到默认样式的调整,Reset或Normalize是否处理了这类问题。 还要注意用户提供的引用内容,尤其是引用[1]提到的浏览器默认样式的影响,所以回答中需要强调这两种工具如何应对这种影响。同时,引用[3]涉及旧版浏览器的测试,可能Normalize对旧版浏览器的支持更好,需要确认这一点。 最后,生成的相关问题需要围绕用户可能的进一步疑问,比如如何选择、如何结合使用、各自的优势等。确保问题能够引导用户深入理解两者的应用场景和技术细节。</think>### Reset CSS与Normalize CSS的区别及用法 #### 一、核心区别 1. **设计理念** - **Reset CSS**:通过强制清除所有浏览器默认样式来实现统一性,例如将元素的`margin`、`padding`归零,移除列表符号等。例如: ```css * { margin:0; padding:0; } ``` 这种做法可能导致开发者需要从头定义所有样式。 - **Normalize CSS**:保留并修复浏览器默认样式的合理性,仅修正跨浏览器不一致的问题。例如统一`<h1>`的字体大小,修复`<sup>`的垂直对齐问题[^1]。 2. **对默认样式的处理** - Reset会完全消除默认样式(如`<ul>`的列表符号),可能影响语义化标签的特性。 - Normalize会保留`<button>`的默认背景色等合理样式,仅调整不一致部分。 3. **代码复杂度** - Reset通常代码量较少(如Eric Meyer的Reset约300行)。 - Normalize代码更复杂(约400行),包含详细的浏览器兼容注释。 #### 二、使用场景 - **选择Reset CSS的情况**: - 需要完全控制视觉设计,不依赖任何默认样式。 - 项目对浏览器兼容性要求较低(旧版IE需额外适配)。 - **选择Normalize CSS的情况**: - 希望保留合理的默认样式(如表单元素的基础交互效果)。 - 需支持广泛浏览器(包括旧版IE和移动端)[^3]。 #### 三、实际应用示例 1. **Reset CSS引入** ```html <link rel="stylesheet" href="reset.css"> <style> /* 自定义样式需从头定义 */ body { font-family: Arial; } </style> ``` 2. **Normalize CSS引入** ```html <link rel="stylesheet" href="normalize.css"> <style> /* 可直接基于修正后的默认样式扩展 */ .button { padding: 0.5em 1em; } </style> ``` #### 四、性能与兼容性 - **Reset**可能因过度重置导致CSS文件体积增加(需覆盖更多元素)。 - **Normalize**通过`@media`查询和条件注释优化了移动端和旧版IE的支持。 #### 五、现代开发实践 1. **混合使用**:在Normalize基础上局部重置特定组件。 2. **结合CSS框架**:如Bootstrap内置了部分Reset逻辑,此时无需重复引入。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值