Reset.css和Normalize.css样式表初始化相关
(1)Reset.css
简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是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: ;
padding: ;
} /* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/ 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: %; } 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: #; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
font-size: %; /* 使得表单元素在 ie 下能继承字体大小 */
} /* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: ;
} /* 重置 hr */
hr {
border: none;
height: 1px;
} /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
(2)Normalize.css
简介:Normalize.css是一种CSS reset的替代方案。Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document
========================================================================== */ /**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/ html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: %; /* 2 */
} /* Sections
========================================================================== */ /**
* Remove the margin in all browsers.
*/ body {
margin: ;
} /**
* Render the `main` element consistently in IE.
*/ main {
display: block;
} /**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/ h1 {
font-size: 2em;
margin: .67em ;
} /* Grouping content
========================================================================== */ /**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/ hr {
box-sizing: content-box; /* 1 */
height: ; /* 1 */
overflow: visible; /* 2 */
} /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/ pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} /* Text-level semantics
========================================================================== */ /**
* Remove the gray background on active links in IE 10.
*/ a {
background-color: transparent;
} /**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/ abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
} /**
* Add the correct font weight in Chrome, Edge, and Safari.
*/ b,
strong {
font-weight: bolder;
} /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/ code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} /**
* Add the correct font size in all browsers.
*/ small {
font-size: %;
} /**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/ sub,
sup {
font-size: %;
line-height: ;
position: relative;
vertical-align: baseline;
} sub {
bottom: -.25em;
} sup {
top: -.5em;
} /* Embedded content
========================================================================== */ /**
* Remove the border on images inside links in IE 10.
*/ img {
border-style: none;
} /* Forms
========================================================================== */ /**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/ button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: %; /* 1 */
line-height: 1.15; /* 1 */
margin: ; /* 2 */
} /**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/ button,
input { /* 1 */
overflow: visible;
} /**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/ button,
select { /* 1 */
text-transform: none;
} /**
* Correct the inability to style clickable types in iOS and Safari.
*/ button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} /**
* Remove the inner border and padding in Firefox.
*/ button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: ;
} /**
* Restore the focus styles unset by the previous rule.
*/ button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} /**
* Correct the padding in Firefox.
*/ fieldset {
padding: .35em .75em .625em;
} /**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/ legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: %; /* 1 */
padding: ; /* 3 */
white-space: normal; /* 1 */
} /**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/ progress {
vertical-align: baseline;
} /**
* Remove the default vertical scrollbar in IE 10+.
*/ textarea {
overflow: auto;
} /**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/ [type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: ; /* 2 */
} /**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/ [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} /**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/ [type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
} /**
* Remove the inner padding in Chrome and Safari on macOS.
*/ [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} /**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/ ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
} /* Interactive
========================================================================== */ /*
* Add the correct display in Edge, IE 10+, and Firefox.
*/ details {
display: block;
} /*
* Add the correct display in all browsers.
*/ summary {
display: list-item;
} /* Misc
========================================================================== */ /**
* Add the correct display in IE 10+.
*/ template {
display: none;
} /**
* Add the correct display in IE 10.
*/ [hidden] {
display: none;
}
官网:官网: http://nicolasgallagher.com/about-normalize-css/
(3)对比
①Normalize.Css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。
相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式
。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
②Normalize.Css 修复了浏览器的Bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。
关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、
许多出现在各浏览器和操作系统中的与表单相关的bug。
③Normalize.Css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题。
④Normalize.Css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。
因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。
⑤Normalize.Css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。
这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。
.
Reset.css和Normalize.css样式表初始化相关的更多相关文章
- CSS 四种引入样式表优缺点分析
CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...
- CSS样式表初始化代码
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...
- CSS之Normalize.css的使用(重置表)
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...
- CSS三种插入样式表格式
首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- CSS的三种样式表和优先级
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- css(1-1)样式表
CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id ...
- css清除常用默认样式表
/*公共样式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, ...
- css常用元素通用样式表
@charset "utf-8";html,body,a,h1,h2,h3,h4,h5,h6,p,a,b,i,em,s,u,dl,dt,dd,ul,ol,li,strong,spa ...
随机推荐
- shell(一) shell变量
基本介绍 变量命名规范 变量名要求由字母.数字.下划线组成,尽量字母开头,有明确含义 注意:变量赋值时,等号前后不能有空格,变量名称不能和字体变量冲突 自定义变量 当前shell有效 1.定义变量 v ...
- stacking method house price in kaggle top10%
整合几部分代码的汇总 隐藏代码片段 导入python数据和可视化包 导入统计相关的工具 导入回归相关的算法 导入数据预处理相关的方法 导入模型调参相关的包 读取数据 特征工程 缺失值 类别特征处理-l ...
- CSS3rem自适应
CSS3rem自适应 如果外层背景是 width:100%; height:100%;拉伸的背景 那top必须要用百分比 才能保证跟背景结合如果外层背景是 width:100%; 自适应宽度的背景 那 ...
- Atlassian JIRA 插件开发之二 安装和创建项目
安装参考 https://developer.atlassian.com/server/framework/atlassian-sdk/install-the-atlassian-sdk-on-a-w ...
- 031 Spring Data Elasticsearch学习笔记---重点掌握第5节高级查询和第6节聚合部分
Elasticsearch提供的Java客户端有一些不太方便的地方: 很多地方需要拼接Json字符串,在java中拼接字符串有多恐怖你应该懂的 需要自己把对象序列化为json存储 查询到结果也需要自己 ...
- FusionInsight大数据开发---HDFS应用开发
HDFS应用开发 HDFS(Dadoop Distributed File System) HDFS概述 高容错性 高吞吐量 大文件存储 HDFS架构包含三部分 Name Node DataNode ...
- Vue3.0结合bootstrap做多页面应用(1)创建项目
本人主要做c# winform应用,刚接触vue,发现用vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquer ...
- 【转载】socket通信-C#实现tcp收发字符串文本数据
在日常碰到的项目中,有些场景需要发送文本数据,也就是字符串,比如简单的聊天文字,JSON字符串等场景.那么如何如何使用SharpSocket来收发此类数据呢?其中要掌握的关键点是什么呢? 点击查看原博 ...
- NVIDIA-docker Cheatsheet
TensorFlow Docker requirements Install Docker on your local host machine. For GPU support on Linux, ...
- 2017-07-26 ThinkPHP简单使用
ThinkPHP是什么?有何优点? ThinkPHP 是一个免费开源的,快速.简单的面向对象的 轻量级PHP开发框架,ThinkPHP为WEB应用开发提供了强有力的支持,这些支持包括: * MVC支持 ...