www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

尽可能从最根本性的问题了解它在帮我们做什么

2019-11-23 22:19 来源:未知

有关CSS Reset那多少个事(2卡塔 尔(英语:State of Qatar):诺玛lize.css 源码解读

2015/08/02 · CSS · CSS Reset, Normalize.css

原稿出处: Alsiso   

前言

上生龙活虎章节牵线了CSS Reset的野史,最终对Normalize.css做了简约的明白,所以从那节起首对源码进行证明翻译与解读,尽可能从最根天性的主题材料询问它在帮大家做什么样?

回顾:有关CSS Reset 这一个事(生龙活虎卡塔 尔(阿拉伯语:قطر‎之 历史衍变与Normalize.css

Normalize 源码解读

前方讲到的分模块解读,正是先黏贴生龙活虎段源码,然后根据官方提供的笺注举行翻译整理,尽只怕提供案例深入解析,然后重新张开整合治理计算,假设您有疑问,能够留言一齐调换。

源码地址:https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本:v3.0.3

html与body 元素

CSS

/** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

1
2
3
4
5
6
7
8
9
10
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
*    without disabling user zoom.
*/
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
  1. 设置全局的字体为sans-serif,关于中文字体的安装可参谋 Amaze UI
  2. 防止 iOS 横屏字号放大,同期确认保证在PC上 zoom 功效日常

第4个难点场景是如此,苹果IOS设备调节后会自动调节文字的大大小小,遵照苹果的用意是为着进步客户体验,比方竖屏状态下是14px,转变为横屏时就成为了20px,把text-size-adjust:100%就不会调动字体大小了。

假设把值设置为'text-size-adjust:none',那么就能导致客商不可能推广收缩字体了。

CSS

/** * Remove default margin. */ body { margin: 0; }

1
2
3
4
5
6
7
/**
* Remove default margin.
*/
 
body {
  margin: 0;
}
  • 修补浏览器默许边距,统意气风发效果

HTML5 元素 display definitions

CSS

/** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
 
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
  • 修补 IE 8/9,HTML5新因素无法科学呈现的难题,定义为block的元素
  • 修复 IE 10/11,details 和 summary 定义为 block 的元素
  • 修复 IE 11,main定义为 block 的元素

以此难题可能咱们都早就十三分领悟,当低版本浏览器遇到不识其余成分时,会暗中同意把他们当成内联成分(inline),这里再一次定义成为block元素。

CSS

/** * 1. Correct `inline-block` display not defined in IE 8/9. *

  1. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
1
2
3
4
5
6
7
8
9
10
11
12
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
 
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
  1. 修复 IE 8/9,HTML5新因素无法准确显示的标题,定义为inline-block元素
  2. 修复Chrome, Firefox, 和Opera的progress要素未有以baseline垂直对齐

progress是HTML5的新标签,能够定义进度条,不过它Chrome, Firefox, 和Opera并从未已baseline垂直对齐。

CSS

/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; }

1
2
3
4
5
6
7
8
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
  display: none;
  height: 0;
}
  • 对不扶持controls个性的浏览器,audio要素给以隐蔽
  • 移除iOS5配备中剩下的万丈

在IE8在此之前的浏览器是不支持controls脾气,这里的主意是直接隐蔽该因素

CSS

/**太阳集团游戏 , * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox <

  1. */ [hidden], template { display: none; }
1
2
3
4
5
6
7
8
9
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
 
[hidden],
template {
  display: none;
}
  • 修复 IE 7/8/9,Firefox 3 和 Safari 4 中hidden性子不起功用的标题
  • 在 IE,Safari,Firefox 22- 中隐藏template元素

hidden是HTML5的新因素,能够对成分举行掩没,不过低版本浏览器并不会识别它,这里统大器晚成做了体制。

template标签用于HTML模板,大家应该都以用过HTML模版开采页面,这几个标签是遵照实际需要增加的,然则模板又不能够在分界面上海展览中心示,所以这里统一了体制,宽容旧浏览器。

链接 Links

CSS

/** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; }

1
2
3
4
5
6
7
/**
* Remove the gray background color from active links in IE 10.
*/
 
a {
  background-color: transparent;
}
  • 去掉 IE 10 点击链接时的深青莲背景

CSS

/** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; }

1
2
3
4
5
6
7
8
9
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
 
a:active,
a:hover {
  outline: 0;
}
  • 去掉点击时的outline火热框,同有的时候间确认保证使用键盘能够彰显主题框,这一个操作针对具备浏览器

语义化文本标签 Text-level semantics

CSS

/** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; }

1
2
3
4
5
6
7
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
 
abbr[title] {
  border-bottom: 1px dotted;
}
  • 修正abbr要素在 Firefox 外其余浏览器未有下划线的主题材料

语义abbr标签是代表简单的称呼或缩写,本人的title性子是后生可畏体化版,不过此标签在Firefox下默许有上边框,而别的浏览器中从不,这里统一了体制。

CSS

/** * Address style set to `bolder` in Firefox 4 , Safari, and Chrome. */ b, strong { font-weight: bold; }

1
2
3
4
5
6
7
8
/**
* Address style set to `bolder` in Firefox 4 , Safari, and Chrome.
*/
 
b,
strong {
  font-weight: bold;
}
  • Firefox3 ,Safari4/5 和 Chrome 中集结安装为粗体

Firefox 3 , Safari 和 Chrome 给bstrong安装的品质是bolder,而不是bold,这里统一了体制。

CSS

/** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; }

1
2
3
4
5
6
7
/**
* Address styling not present in Safari and Chrome.
*/
 
dfn {
  font-style: italic;
}
  • 太阳2007娱乐官方网址 ,校正 Safari5 和 Chrome 中绝非样式的主题素材

dfn 标签可标识那多少个对特殊术语或短语的概念,在Safari 和Chrome 里不是斜体,在这里边统一了体制。

CSS

/** * Address variable `h1` font-size and margin within `section` and `article` *www.22138com , contexts in Firefox 4 , Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; }

1
2
3
4
5
6
7
8
9
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4 , Safari, and Chrome.
*/
 
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
  • 修复 Firefox 4 ,Safari 5 和 Chrome 中sectionarticle内的h1字体大小

CSS

/** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; }

1
2
3
4
5
6
7
8
/**
* Address styling not present in IE 8/9.
*/
 
mark {
  background: #ff0;
  color: #000;
}
  • 修补 IE 6/9, Safari 5 和 Chrome中样式不表现的标题

mark标签用来优秀呈现部分文件,设置后会有八个高亮背景,不过此标签是HTML5中的新标签,在低版本浏览器并不识别,所以须要重新初始化样式。

CSS

/** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; }

1
2
3
4
5
6
7
/**
* Address inconsistent and variable font size in all browsers.
*/
 
small {
  font-size: 80%;
}
  • 在享有浏览器中会集small的字体大小

small标签在 HTML 4.01 就早就存在,HTML5中增长了它的含意,表示旁注消息,可是此标签在相继浏览器中显示的字体大小不相像,在此边做了合併

CSS

/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
 
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
 
sup {
  top: -0.5em;
}
 
sub {
  bottom: -0.25em;
}
  • 抗御全数浏览器中的subsup影响行高

supsub四个标签是用来表示上标和下标,据HTML标准中对smallsubsup的轻主供给都以smaller,可是如上所示normalize.csssmall设的是80%,而subsup却是百分之二十五,所感觉了保持风度翩翩致,且不影响此外因素的行高,把双边的line-height设为0,然后设置它的垂直以baseline开首,设置topbottom手动设置两个偏移量

内嵌成分 Embedded content

CSS

/** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; }

1
2
3
4
5
6
7
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
 
img {
  border: 0;
}
  • 去除 IE6-9 和 Firefox 3 中a内部img要素暗中认可的边框

在旧版本的浏览器中,图片暗中同意会有四个奇丑无比的月光蓝边框,那这里进行破除,统同样式。

CSS

/** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; }

1
2
3
4
5
6
7
/**
* Correct overflow not hidden in IE 9/10/11.
*/
 
svg:not(:root) {
  overflow: hidden;
}
  • 修复 IE9 中的overflow的古怪表现

群组成分 Grouping content

CSS

/** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; }

1
2
3
4
5
6
7
/**
* Address margin not present in IE 8/9 and Safari.
*/
 
figure {
  margin: 1em 40px;
}
  • 修复 IE 8/9、Safari中margin失效

figure 是HTML5的新标签,用做文书档案插图,但它在 IE 8/9 and Safari 中的默许margin失效,这里做了联合安装。

CSS

/** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; }

1
2
3
4
5
6
7
8
/**
* Address differences between Firefox and other browsers.
*/
 
hr {
  box-sizing: content-box;
  height: 0;
}
  • 修改 Firefox 和任何浏览器之间的出入

在 Firefox 中,hr要素的私下认可样式超级多,和其它浏览器主要的歧异有两点:
1.设置了height2px;
2.box-sizingborder-box;
此体制对那多个难点举办重新苏醒设置,进行合并

CSS

/** * Contain overflow in all browsers. */ pre { overflow: auto; }

1
2
3
4
5
6
7
/**
* Contain overflow in all browsers.
*/
 
pre {
  overflow: auto;
}
  • 标签设置滚动条,内容溢出时现身

大多数浏览器的preoverflow的时候会平素溢出来,这里丰裕overflow:auto让它现身滚动条

CSS

/** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

1
2
3
4
5
6
7
8
9
10
11
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
 
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
  • 用于修复 Safari 5 和 Chrome 中竟然的字体设置,统一字体样式,

总结

此章节我们对Normalize.css中装置的 html与body成分,HTML5成分,链接,语义化文本,内嵌成分,群组元素的源码实行详细的解读,开采正如其说的均等,它不止帮大家修复了浏览器的暗许bug,还保存了非常多标签的默许值,特别是语义化标签,百折不挠他们存在的含义。

是因为源码部分过长,所以对于源码的深入分析会分为两节,下生机勃勃节大家后续来介绍:

表单:表单往往存在相当多标题,如广大的各个不三番五次难题,那这里都会赢得修复
表格:表格的暗许边距和边框真的非常不好看,要求修补修复

下风度翩翩节会完结全体模块对normalize.css源码解读,届期会照料大器晚成份normalize-zh.css普通话注释的本子上传至Github,供大家参考使用,敬请期望…

1 赞 收藏 评论

太阳2007娱乐官方网址 1

TAG标签: www.22138com CSS
版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:尽可能从最根本性的问题了解它在帮我们做什么