Normalize.css做了哪些事情--看代码
博主说:本博客文章来源包括转载,翻译,原创,且在文章内均有标明。鼓励原创,支持创作共享,请勿用于商业用途,转载请注明文章链接。本文链接:http://www.kein.pw/?p=80
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5新标签display属性定义
========================================================================== */
/**
* 为 IE 8/9定义新的块状元素.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
*为 IE 8/9定义新的inline-block元素.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* 防止现代浏览器在显示audio的时候没有控制条
* 移除在iOS5设备中多出的高度
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* 修正IE 8/9不支持的属性
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. 设置默认字体为 sans-serif.
* 2. 组织iOS方向变化后的字体调整,但不禁止用户缩放.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* 移除默认外边距.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* 统一所有浏览器的链接焦点虚线框.
*/
a:focus {
outline: thin dotted;
}
/**
*提升所有浏览器中链接焦点和鼠标划过后的可读性
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* 统一h1在不同浏览器中具有不同的字号和外边距 Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* 修正不支持的属性 IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* 修正b,strong的加粗样式为bold in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* 修正不支持属性 in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* 统一火狐与其它浏览器的样式
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* 修正不支持属性 in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* 修正奇葩字体设定 in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* 提升所有浏览器的可读性.
*/
pre {
white-space: pre-wrap;
}
/**
* 设置一致的样式.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* 统一所有浏览器字号.
*/
small {
font-size: 80%;
}
/**
*消除 `sub` 和`sup`对 `line-height` 的影响 all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
*移除边框 in IE 8/9.
*/
img {
border: 0;
}
/**
*修正显示怪异 in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* 修正不支持属性 IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* 定义一致的边框,外边距,内边距 border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1.修正color没有继承 in IE 8/9.
* 2.移除内边距,防止属性归零时不出纰漏
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. 修正字体不能继承 in all browsers.
* 2.修正字号不能继承 in all browsers.
* 3. 统一不同的外边距 in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* 修正 Firefox 4+ 默认的!important设置
*/
button,
input {
line-height: normal;
}
/**
* 修正`button` 和`select`的text-transform属性遗传不一致
* 所有其他form控制元素不继承 `text-transform` 的值.
* 修正 `button`样式遗传 in Chrome, Safari 5+, and IE 8+.
* 修正`select` 样式遗传 in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. 避开 WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. 修正iOs中无法给可点击的input添加样式的问题
* 3. 提高type属性为image的input元素鼠标指针的可用性和一致性
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* 重置不可操作元素的默认鼠标指针
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1.修正type属性为 `content-box`的box-sizing样式 in IE 8/9.
* 2. 移除多余的padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. 修正搜索框的 `appearance` 属性in Safari 5 and Chrome.
* 2.修正 `box-sizing` 属性 `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
*移除内边距和取消搜索按钮in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 移除边框和内边距in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1.移除默认的竖向滚动条 in IE 8/9.
* 2.提高可读性和对齐 in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* 移除大多数单元格中的的空格.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
Normalize.css做了哪些事情--看代码的更多相关文章
- Normalize.css 介绍与源码解读
开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目 ...
- 剥开比原看代码08:比原的Dashboard是怎么做出来的?
作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...
- Normalize.css的使用及下载
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...
- [转载]来,让我们谈一谈Normalize.css
来源 : http://segmentfault.com/a/1190000002239676 ---------------------------------------------------- ...
- Normalize.css 初识
一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...
- Normalize.css的使用(重置表)
本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...
- 来,让我们谈一谈Normalize.css
本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormal ...
- Normalize.css介绍,作用,使用方法
介绍 Normalize.css 是一个很小的CSS文件(V5.0.0版本大小8KB),但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.c ...
- [转载] ul li css 做横向菜单
原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...
随机推荐
- 网络数据包分析 网卡Offload
http://blog.nsfocus.net/network-packets-analysis-nic-offload/ 对于网络安全来说,网络传输数据包的捕获和分析是个基础工作,绿盟科技研 ...
- SQL Server 2012的内部原理和故障排除(50):Burgess_Liu的专栏
http://blog.csdn.net/Burgess_Liu/article/category/1821435/2 http://www.cnblogs.com/fygh/archive/2012 ...
- Word中插入英文格式的算法流程
如图上部分所示,需要序号自动编号,那么插入一个一行一列的的表格,然后点击编号,使得项目自动编号,编号一个就在后面输入一些内容,按enter后第二行开始自动编号,如果要缩进,不能按Tab,Tab自动创建 ...
- appium+python自动化49-yaml管理定位元素
前言 如何高效管理定位元素,这个是很有学问的问题,也是面试必问的[以下纯属个人观点,勿喷!]. 有的人用xml管理页面定位元素,这种逼格略高,但是小编认为学习成本大,贼麻烦. 有的人提到用excel管 ...
- git log --oneline --graph的读法
星号表明这个提交所在的分支: 最左边的直线表示当前分支的历史状态,从图看,当前分支HEAD是master分支 :提交历史是:8cfbb25<--d486463<--a88c595<- ...
- 剖析ASP.NET Core(Part 4)- 调用MVC中间件(译)
原文:https://www.stevejgordon.co.uk/invoking-mvc-middleware-asp-net-core-anatomy-part-4 发布于:2017年5月环境: ...
- iOS:使用block代码块实现事件处理过程中的回调
block是什么,这里就不多加强调了,它的优点: 第一:执行效率高,速度快 第二:使用起来比代理简单,省却不少代码,增强代码美感 有一些小的知识点要强调一下: 第一点:它类似于一个匿名函数,也跟jav ...
- Android应用程序访问linux驱动第一步:实现并测试Linux驱动
一直都想亲自做一次使用android应用程序访问Linux内核驱动的尝试,但总是没能做到.最近抽出时间,下决心重新尝试一次.尝试的开始当然是先写一个Linux内核驱动了. 我希望写一个简单测驱动程序, ...
- JDBC纯驱动方式连接MySQL
1 新建一个名为MysqlDemo的JavaProject 2 从http://dev.mysql.com/downloads/connector/j/中下载最新的驱动包. 这里有.tar.gz和.z ...
- strcpy,memcpy,memmove和内存重叠分析
一:strcpy函数用法和实现: /* GNU-C中的实现(节选): */ char* strcpy(char *d, const char *s) { char *r=d; while((*d++= ...