两种不同的重置样式方法(normalize.css)
重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生。
* {
padding: 0;
margin: 0;
}
这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/ html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
} /**
* Remove the margin in all browsers (opinionated).
*/ body {
margin: 0;
} /* HTML5 display definitions
========================================================================== */ /**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/ article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
} /**
* Add the correct display in IE 9-.
*/ audio,
canvas,
progress,
video {
display: inline-block;
} /**
* Add the correct display in iOS 4-7.
*/ audio:not([controls]) {
display: none;
height: 0;
} /**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/ progress {
vertical-align: baseline;
} /**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/ template, /* 1 */
[hidden] {
display: none;
} /* Links
========================================================================== */ /**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/ a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
} /**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/ a:active,
a:hover {
outline-width: 0;
} /* Text-level semantics
========================================================================== */ /**
* 1. Remove the bottom border in Firefox 39-.
* 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 */
} /**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/ b,
strong {
font-weight: inherit;
} /**
* Add the correct font weight in Chrome, Edge, and Safari.
*/ b,
strong {
font-weight: bolder;
} /**
* Add the correct font style in Android 4.3-.
*/ dfn {
font-style: italic;
} /**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/ h1 {
font-size: 2em;
margin: 0.67em 0;
} /**
* Add the correct background and color in IE 9-.
*/ mark {
background-color: #ff0;
color: #000;
} /**
* Add the correct font size in all browsers.
*/ small {
font-size: 80%;
} /**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/ sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
} sub {
bottom: -0.25em;
} sup {
top: -0.5em;
} /* Embedded content
========================================================================== */ /**
* Remove the border on images inside links in IE 10-.
*/ img {
border-style: none;
} /**
* Hide the overflow in IE.
*/ svg:not(:root) {
overflow: hidden;
} /* Grouping content
========================================================================== */ /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/ code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} /**
* Add the correct margin in IE 8.
*/ figure {
margin: 1em 40px;
} /**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/ hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
} /* Forms
========================================================================== */ /**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/ button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
} /**
* Restore the font weight unset by the previous rule.
*/ optgroup {
font-weight: bold;
} /**
* 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;
} /**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/ button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
} /**
* 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: 0;
} /**
* 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;
} /**
* Change the border, margin, and padding in all browsers (opinionated).
*/ fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} /**
* 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: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
} /**
* Remove the default vertical scrollbar in IE.
*/ 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: 0; /* 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 and cancel buttons in Chrome and Safari on OS X.
*/ [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} /**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/ ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
} /**
* 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 */
}
normalize.css没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。
一种清除,一种保留兼容
两种不同的重置样式方法(normalize.css)的更多相关文章
- GIT将本地项目上传到Github(两种简单、方便的方法)
GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...
- 调用init方法 两种方式 一个是浏览器方法 一个是 xml中手工配置(load-on-startup)
调用init方法 两种方式 一个是浏览器方法 一个是 xml中手工配置(load-on-startup)
- php 两种获取分类树的方法
php 两种获取分类树的方法 1. /** * 获取分类树 * @param array $array 数据源 * @param int $pid 父级ID * @param int $level 分 ...
- 两种读取.xml文件的方法
这里介绍两种读取配置文件(.xml)的方法:XmlDocument及Linq to xml 首先简单创建一个配置文件: <?xml version="1.0" encodin ...
- [转]两种Sigma-Delta ADC SNR仿真方法
假设现有一组Sigma-Delta ADC输出序列,下面将介绍两种计算出相应SNR的方法.其中由cadence导出数据的CIW窗口命令为:ocPrint(?output "输出目录/输出文件 ...
- Android中两种设置全屏的方法
设置全屏的两种方法: 第一种:在配置文件里面配置: <?xml version="1.0" encoding="utf-8"?><manife ...
- 两种应该掌握的排序方法--------1.shell Sort
先了解下什么都有什么排序算法 https://en.wikipedia.org/wiki/Sorting_algorithm http://zh.wikipedia.org/zh/%E6%8E%92% ...
- Gradle实现的两种简单的多渠道打包方法
本来计划今天发Android的官方技术文档的翻译--<Gradle插件用户指南>的第五章的,不过由于昨天晚上没译完,还差几段落,所以只好推后了. 今天就说一下使用Gradle进行类似友盟这 ...
- 转: 将Eclipse代码导入到AndroidStudio的两种方式 ,测试了方法2,成功。
蛋疼,不知道为什么我的eclipse的logcat总是莫名其妙的显示一堆黄色字体的字,看不懂的那种,如下图: 然后查了一下资料,说可能是adt版本太低,手机系统太高. 然后本来想升级adt,但是各种折 ...
随机推荐
- 学习笔记——访问者模式Visitor
访问者模式,通过Visitor的注入,为Element扩展了方法实现.虽然避免了Element不用修改即可修改,但却破坏了类的封装性,同时,一旦变更就需要增加子类,在子类方法中调用基类方法,然后再使用 ...
- Java Queue 各种方法的区别
再Java里的某些集合类,其实是实现了多个接口的,所以就会同时又多种方法针对同一种操作,比如LinkedList类. 首先看一下java集合类的继承关系图: 这里简单对其重复的方法做点简单的区分. o ...
- spark 编程向导
http://spark.apache.org/docs/latest/programming-guide.html
- 裸二分图匹配poj1469
poj1496 题意: 给你p门课程和n个学生,一个学生可以选0门,1门,或者多门课程, 现在要求一个由p个学生组成的集合,满足下列2个条件: 1.每个学生选择一个不同的课程 2.每个课程都有不同的代 ...
- getuid和geteuid的区别
getuid() : 函数返回一个调用程序的真实用户ID.表明当前运行位置程序的执行者. geteuid(): 函数返回返回一个有效用户的ID.(EUID)是你最初执行程序时所用的ID,该ID是程序 ...
- 认识ASP.NET MVC的5种AuthorizationFilter
在总体介绍了筛选器及其提供机制(<深入探讨ASP.NET MVC的筛选器>)之后,我们按照执行的先后顺序对四种不同的筛选器进行单独介绍,首先来介绍最先执行的AuthorizationFil ...
- LeetCode OJ 100. Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
- Apache配置详解【转】
http站点要这样配置服务器才安全 2016-07-29 10:32 主机(站点)配置 一个站点的2个核心信息为: 主机名(服务器名/站点名): ServerName 服务器名 站点位置(站点目录路径 ...
- asp.net无法触发asp控件的后台方法
前台代码: <asp:Button ID="btnFinish" runat="server" Text="完成" Font-Size ...
- Zabbix3.0 客户端搭建
zabbix客户端安装 我们这边使用编译安装 软件包版本 zabbix-3.0.3.tar.gz 添加用户组 #groupadd zabbix #useradd -s /sbin/nologin -g ...