Reset css

CSS Reset样式详解

最近收集的一个css Reset所以贴上来,分享一下:

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
    border-bottom: 1px dotted;
    cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

  文章转自:http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html

转载于:https://www.cnblogs.com/izhaofu/p/4164606.html

【复现】并_离网风光互补制氢合成氨系统容量-调度优化分析(Python代码实现)内容概要:本文围绕“并_离网风光互补制氢合成氨系统容量-调度优化分析”的主题,提供了基于Python代码实现的技术研究与复现方法。通过构建风能、太阳能互补的可再生能源系统模型,结合电解水制氢与合成氨工艺流程,对系统的容量配置与运行调度进行联合优化分析。利用优化算法求解系统在不同运行模式下的最优容量配比和调度策略,兼顾经济性、能效性和稳定性,适用于并网与离网两种场景。文中强调通过代码实践完成系统建模、约束设定、目标函数设计及求解过程,帮助读者掌握综合能源系统优化的核心方法。; 适合人群:具备一定Python编程基础和能源系统背景的研究生、科研人员及工程技术人员,尤其适合从事可再生能源、氢能、综合能源系统优化等相关领域的从业者;; 使用场景及目标:①用于教学与科研中对风光制氢合成氨系统的建模与优化训练;②支撑实际项目中对多能互补系统容量规划与调度策略的设计与验证;③帮助理解优化算法在能源系统中的应用逻辑与实现路径;; 阅读建议:建议读者结合文中提供的Python代码进行逐模块调试与运行,配合文档说明深入理解模型构建细节,重点关注目标函数设计、约束条件设置及求解器调用方式,同时可对比Matlab版本实现以拓宽工具应用视野。
<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逻辑,此时无需重复引入。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值