您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net0英汉对照版,源码解读

新葡亰496net0英汉对照版,源码解读

发布时间:2019-09-23 02:31编辑:新葡亰官网浏览(163)

    关于CSS Reset那多少个事(2):Normalize.css 源码解读

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

    初稿出处: Alsiso   

    关于CSS Reset那些事(3):架构CSS基础库

    2015/08/03 · CSS · CSS Reset

    原稿出处: Alsiso   

    /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

    /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

    前言

    上一章节牵线了CSS Reset的野史,最后对Normalize.css做了简单的领悟,所以从那节伊始对源码进行评释翻译与解读,尽大概从最根特性的难点询问它在帮大家做什么?

    回顾:关于CSS Reset 那个事(一)之 历史衍生和变化与Normalize.css

    前言

    上一章节我们对Normalize.css源码进行解析,但是由于其代码过长导致不宜浏览,所以表单Forms,表格Table部分内容放在此章节介绍。本章节会完成所有源代码翻译整理,最终会整理出Normalize-zh.css中文版本并开源至Github供大家交流使用。

    回顾:至于CSS Reset 那几个事(二)之 Normalize.css 源码解读


    //

    /**

    Normalize 源码解读

    前面讲到的分模块解读,便是先黏贴一段源码,然后依据官方提供的讲明进行翻译整理,尽只怕提供案例解析,然后重新张开重新整建计算,倘若您有疑难,能够留言一同交流。

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

    Normalize-zh.css 出炉

    Normalize-zh.css是根据对Normalize.css的源码分析后,经过学习与整理,将源代码中的英文注释文档翻译为中文版本,方便国内的开发者学习和使用,我深知此版本一定有很多不足,希望能得到大家的理解和支持,同样也很愿意和大家一起完善。

    现已将源代码开源至Github

    花色地址:

    /**

    // 1. Set default font family to sans-serif.

    * 1. Change the default font family in all browsers (opinionated).设置暗中同意字体为无衬线字体。

    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;
    }
    • 修复浏览器私下认可边距,统一效果

    Normalize 源码解读 (2)

    上章节对 html与body元素,HTML5成分,链接,语义化文本,内嵌成分,群组元素等源码内容已经做领悟析,那章节继续达成表单Forms,表格Table部分。

    源码地址:

    源码版本:v3.0.3

    * 1. Change the default font family in all browsers (opinionated).设置暗中同意字体为无衬线字体。

    // 2. Prevent iOS and IE text size adjust after device orientation change,

    * 2. Prevent adjustments of font size after orientation changes in IE and iOS.幸免 iOS 和 IE 横屏时调解文本大小,不用none值禁止顾客缩放。

    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模版开拓页面,那么些标签是安分守纪实际供给增加的,然则模板又无法在分界面上显得,所以那边统一了体制,包容旧浏览器。

    表单 Forms

    CSS

    /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4 , Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /**
    * 1. Correct color not being inherited.
    *    Known issue: affects color of disabled elements.
    * 2. Correct font properties not being inherited.
    * 3. Address margins set differently in Firefox 4 , Safari, and Chrome.
    */
     
    button,
    input,
    optgroup,
    select,
    textarea {
      color: inherit; /* 1 */
      font: inherit; /* 2 */
      margin: 0; /* 3 */
    }
    1. 改良全部浏览器中颜色不接二连三的难题
    2. 改良全部浏览器中字体不继续的难题
    3. 考订 Firefox 3 , Safari5 和 Chrome 中外边距分裂的难点

    有局部浏览器会把form表单中的一些元素 textarea,text,button,select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体,并不会从父元素继承,所以这里重置了这些元素的默认样式。

    CSS

    /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; }

    1
    2
    3
    4
    5
    6
    7
    /**
    * Address `overflow` set to `hidden` in IE 8/9/10/11.
    */
     
    button {
      overflow: visible;
    }
    • 统一 IE 8/9/10/11 overflow属性为visible

    在 IE 8/9/10/11里的button默认的overflow是hidden,这里统一为visible

    CSS

    /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /**
    * Address inconsistent `text-transform` inheritance for `button` and `select`.
    * All other form control elements do not inherit `text-transform` values.
    * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
    * Correct `select` style inheritance in Firefox.
    */
     
    button,
    select {
      text-transform: none;
    }
    • 联合各浏览器text-transform不会继承的问题

    CSS

    /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /**
    * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
    *    and `video` controls.
    * 2. Correct inability to style clickable `input` types in iOS.
    * 3. Improve usability and consistency of cursor style between image-type
    *    `input` and others.
    */
     
    button,
    html input[type="button"], /* 1 */
    input[type="reset"],
    input[type="submit"] {
      -webkit-appearance: button; /* 2 */
      cursor: pointer; /* 3 */
    }
    1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会毁掉原生的audio和video的控制器
    • 更正 iOS 中无法设置可点击的input的问题
    • 联合其余品类的input的光标样式

    此处将可点击的按键,统一安装鼠标准样品式为pointer,提高了可用性

    CSS

    /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; }

    1
    2
    3
    4
    5
    6
    7
    8
    /**
    * Re-set default cursor for disabled elements.
    */
     
    button[disabled],
    html input[disabled] {
      cursor: default;
    }
    • 重新载入参数开关禁止使用时光标样式

    CSS

    /** * Remove inner padding and border in Firefox 4 . */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
    * Remove inner padding and border in Firefox 4 .
    */
     
    button::-moz-focus-inner,
    input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    • 移除 Firefox 4 的内边距

    CSS

    /** * Address Firefox 4 setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; }

    1
    2
    3
    4
    5
    6
    7
    8
    /**
    * Address Firefox 4 setting `line-height` on `input` using `!important` in
    * the UA stylesheet.
    */
     
    input {
      line-height: normal;
    }
    • 合併安装行高为normal

    Firefox浏览器会暗许设置input[type=”button”]的行高为normal !important,这里统一样式

    CSS

    /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /**
    * It's recommended that you don't attempt to style these elements.
    * Firefox's implementation doesn't respect box-sizing, padding, or width.
    *
    * 1. Address box sizing set to `content-box` in IE 8/9/10.
    * 2. Remove excess padding in IE 8/9/10.
    */
     
    input[type="checkbox"],
    input[type="radio"] {
      box-sizing: border-box; /* 1 */
      padding: 0; /* 2 */
    }
    1. 校正 IE 8/9 box-sizing 被安装为content-box的问题
    • 移除 IE 8/9 中多余的内边距

    CSS

    /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /**
    * Fix the cursor style for Chrome's increment/decrement buttons. For certain
    * `font-size` values of the `input`, it causes the cursor style of the
    * decrement button to change from `default` to `text`.
    */
     
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      height: auto;
    }
    • 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 时,下面一个箭头光标变成cursor: text 效果

     

    CSS

    /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
    * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
    * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
    */
     
    input[type="search"] {
      -webkit-appearance: textfield; /* 1 */
      box-sizing: content-box; /* 2 */
    }
    1. 修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
    • 修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题

    searchfield是CSS3的属性,它可以让一个div元素看上去像任何元素,但是浏览器支持性并不好,

    CSS

    /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /**
    * Remove inner padding and search cancel button in Safari and Chrome on OS X.
    * Safari (but not Chrome) clips the cancel button when the search input has
    * padding (and `textfield` appearance).
    */
     
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    • 移除原生私下认可样式,统一search的输入框样式

     

    CSS

    /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
    * Define consistent border, margin, and padding.
    */
     
    fieldset {
      border: 1px solid #c0c0c0;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;
    }
    • 概念一致的边框、外边距和内边距

    CSS

    /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
    * 1. Correct `color` not being inherited in IE 8/9/10/11.
    * 2. Remove padding so people aren't caught out if they zero out fieldsets.
    */
     
    legend {
      border: 0; /* 1 */
      padding: 0; /* 2 */
    }
    1. 修正 IE 6-9 中颜色无法持续的难点
    2. 重新设置内边距

    CSS

    /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; }

    1
    2
    3
    4
    5
    6
    7
    /**
    * Remove default vertical scrollbar in IE 8/9/10/11.
    */
     
    textarea {
      overflow: auto;
    }
    • 移除 IE8-11 中暗中同意的垂直滚动条

    CSS

    /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; }

    1
    2
    3
    4
    5
    6
    7
    8
    /**
    * Don't inherit the `font-weight` (applied by a rule above).
    * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
    */
     
    optgroup {
      font-weight: bold;
    }
    • 联合设置optgroup元素font-weight始终为bold

    * 2. Prevent adjustments of font size after orientation changes in IE and iOS.制止 iOS 和 IE 横屏时调治文本大小,不用none值禁止顾客缩放。

    //    without disabling user zoom.

    */

    链接 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要点框,同期保障使用键盘能够来得主旨框,那么些操作针对富有浏览器

    表格 Tables

    CSS

    /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /**
    * Remove most spacing between table cells.
    */
     
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
     
    td,
    th {
      padding: 0;
    }

    */

    //

    html{

    语义化文本标签 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;
    }
    • 校勘 Safari5 和 Chrome 中从不样式的主题材料

    dfn 标签可标志那么些对卓越术语或短语的概念,在Safari 和Chrome 里不是斜体,在此处统一了体制。

    CSS

    /** * 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; }

    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手动设置两个偏移量

    总结

    由此三个章节对Normalize.css的源码进行了学习,清晰的了解了它的工作原理,作为传统CSS Reset替代者,它当之无愧,为大家提供一套很完整的跨浏览器解决方案。

    而是,你是或不是会有和自个儿同一的须求,比方开拓多少个小站,大概一个PC端的系统时,恐怕只须求有的回顾的根底模块,例如自个儿只想要简单的样式重新载入参数,统一各浏览器的遵从就好,并没有须要HTML5以及CSS3的部分主题素材修复。

    那就是说下一章,大家来介绍,借使拟订属于本人的 CSS基础代码库?

    1 赞 1 收藏 评论

    新葡亰496net 1

    html{

    html{

    font-family:sans-serif; /* 1 */

    内嵌成分 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的诡异表现

    font-family:sans-serif; /* 1 */

    font-family:sans-serif;// 1

    -ms-text-size-adjust:100%;/* 2 */

    群组元素 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 中意外的字体设置,统一字体样式,

    -ms-text-size-adjust:100%;/* 2 */

    -ms-text-size-adjust:100%;// 2

    -webkit-text-size-adjust:100%;/* 2 */

    总结

    此章节大家对Normalize.css中安装的 html与body成分,HTML5成分,链接,语义化文本,内嵌成分,群组元素的源码进行详细的解读,开采正如其说的同一,它不只帮大家修复了浏览器的暗许bug,还保存了重重标签的暗中同意值,特别是语义化标签,百折不回他们存在的含义。

    鉴于源码部分过长,所以对于源码的深入分析会分为两节,下一节我们后续来介绍:

    表单:表单往往存在相当的多难点,如周边的各个不接二连三难点,这这里都会赢得修复
    表格:表格的暗中认可边距和边框真的非常不好看,必要修补修复

    下一节会达成具备模块对normalize.css源码解读,届时会整理一份normalize-zh.css华语注释的本子上传至Github,供大家仿照效法使用,敬请期待…

    1 赞 收藏 评论

    新葡亰496net 2

    -webkit-text-size-adjust:100%;/* 2 */

    -webkit-text-size-adjust:100%;// 2

    }

    }

    }

    /**

    /**

    //

    * Remove the margin in all browsers (opinionated).移除margin,针对富有浏览器(自定义)

    * Remove the margin in all browsers (opinionated).移除margin,针对富有浏览器(自定义)

    // Remove default margin.

    */

    */

    //

    body{

    body{

    body{

    margin:0;

    margin:0;

    margin:0;

    }

    }

    }

    /* HTML5 display definitions HTML5展现定义

    /* HTML5 display definitions HTML5来得定义

    // HTML5 display definitions

    ========================================================================== */

    ========================================================================== */

    //

    //

    // 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. 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

    }

    //

    // Prevent modern browsers from displaying `audio` without controls.

    // Remove excess height in iOS 5 devices.

    //

    audio:not([controls]) {

    display:none;

    height:0;

    }

    //

    // 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;

    }

    // Links

    /**

    /**

    //

    //

    // Remove the gray background color from active links in IE 10.

    //

    a{

    background-color:transparent;

    }

    //

    // Improve readability of focused elements when they are also in an

    // active/hover state.

    //

    a:active,

    a:hover{

    outline:0;

    }

    // Text-level semantics

    * Add the correct display in IE 9-.改良补充IE9-的显示方式

    * Add the correct display in IE 9-.纠正补充IE9-的突显情势

    //

    //

    // Address styling not present in IE 8/9/10/11, Safari, and Chrome.

    //

    abbr[title] {

    border-bottom:1pxdotted;

    }

    //

    // Address style set to `bolder` in Firefox 4 , Safari, and Chrome.

    //

    b,

    strong{

    font-weight:bold;

    }

    //

    // Address styling not present in Safari and Chrome.

    //

    dfn{

    font-style:italic;

    }

    //

    // Address variable `h1` font-size and margin within `section` and `article`

    // contexts in Firefox 4 , Safari, and Chrome.

    //

    h1{

    font-size:2em;

    margin:0.67em0;

    }

    //

    // Address styling not present in IE 8/9.

    //

    mark{

    background:#ff0;

    color:#000;

    }

    //

    // Address inconsistent and variable font size in all browsers.

    //

    small{

    font-size:80%;

    }

    //

    // 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;

    }

    // Embedded content

    * 1. Add the correct display in Edge, IE, and Firefox.考订补充Edge, IE, and Firefox的呈现格局

    * 1. Add the correct display in 艾德ge, IE, and Firefox.改正补充Edge, IE, and Firefox的展现格局

    //

    //

    // Remove border when inside `a` element in IE 8/9/10.

    //

    img{

    border:0;

    }

    //

    // Correct overflow not hidden in IE 9/10/11.

    //

    svg:not(:root) {

    overflow:hidden;

    }

    // Grouping content

    * 2. Add the correct display in IE.校勘补充IE的彰显格局

    * 2. Add the correct display in IE.改进补充IE的显示格局

    //

    //

    // Address margin not present in IE 8/9 and Safari.

    //

    figure{

    margin:1em40px;

    }

    //

    // Address differences between Firefox and other browsers.

    //

    hr{

    box-sizing:content-box;

    height:0;

    }

    //

    // Contain overflow in all browsers.

    //

    pre{

    overflow:auto;

    }

    //

    // Address odd `em`-unit font size rendering in all browsers.

    //

    code,

    kbd,

    pre,

    samp{

    font-family:monospace,monospace;

    font-size:1em;

    }

    // Forms

    */

    */

    //

    //

    // Known limitation: by default, Chrome and Safari on OS X allow very limited

    // styling of `select`, unless a `border` property is set.

    //

    //

    // 1. Correct color not being inherited.

    //    Known issue: affects color of disabled elements.

    // 2. Correct font properties not being inherited.

    // 3. Address margins set differently in Firefox 4 , Safari, and Chrome.

    //

    button,

    input,

    optgroup,

    select,

    textarea{

    color:inherit;// 1

    font:inherit;// 2

    margin:0;// 3

    }

    //

    // Address `overflow` set to `hidden` in IE 8/9/10/11.

    //

    button{

    overflow:visible;

    }

    //

    // Address inconsistent `text-transform` inheritance for `button` and `select`.

    // All other form control elements do not inherit `text-transform` values.

    // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.

    // Correct `select` style inheritance in Firefox.

    //

    button,

    select{

    text-transform:none;

    }

    //

    // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`

    //    and `video` controls.

    // 2. Correct inability to style clickable `input` types in iOS.

    // 3. Improve usability and consistency of cursor style between image-type

    //    `input` and others.

    //

    button,

    htmlinput[type="button"],// 1

    input[type="reset"],

    input[type="submit"] {

    -webkit-appearance: button;// 2

    cursor:pointer;// 3

    }

    //

    // Re-set default cursor for disabled elements.

    //

    button[disabled],

    htmlinput[disabled] {

    cursor:default;

    }

    //

    // Remove inner padding and border in Firefox 4 .

    //

    button::-moz-focus-inner,

    input::-moz-focus-inner{

    border:0;

    padding:0;

    }

    //

    // Address Firefox 4 setting `line-height` on `input` using `!important` in

    // the UA stylesheet.

    //

    input{

    line-height:normal;

    }

    //

    // It's recommended that you don't attempt to style these elements.

    // Firefox's implementation doesn't respect box-sizing, padding, or width.

    //

    // 1. Address box sizing set to `content-box` in IE 8/9/10.

    // 2. Remove excess padding in IE 8/9/10.

    //

    input[type="checkbox"],

    input[type="radio"] {

    box-sizing:border-box;// 1

    padding:0;// 2

    }

    //

    // Fix the cursor style for Chrome's increment/decrement buttons. For certain

    // `font-size` values of the `input`, it causes the cursor style of the

    // decrement button to change from `default` to `text`.

    //

    input[type="number"]::-webkit-inner-spin-button,

    input[type="number"]::-webkit-outer-spin-button{

    height:auto;

    }

    //

    // 1. Address `appearance` set to `searchfield` in Safari and Chrome.

    // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.

    //

    input[type="search"] {

    -webkit-appearance: textfield;// 1

    box-sizing:content-box;//2

    }

    //

    // Remove inner padding and search cancel button in Safari and Chrome on OS X.

    // Safari (but not Chrome) clips the cancel button when the search input has

    // padding (and `textfield` appearance).

    //

    input[type="search"]::-webkit-search-cancel-button,

    input[type="search"]::-webkit-search-decoration{

    -webkit-appearance:none;

    }

    //

    // Define consistent border, margin, and padding.

    //

    fieldset{

    border:1pxsolid#c0c0c0;

    margin:02px;

    padding:0.35em0.625em0.75em;

    }

    //

    // 1. Correct `color` not being inherited in IE 8/9/10/11.

    // 2. Remove padding so people aren't caught out if they zero out fieldsets.

    //

    legend{

    border:0;// 1

    padding:0;// 2

    }

    //

    // Remove default vertical scrollbar in IE 8/9/10/11.

    //

    textarea{

    overflow:auto;

    }

    //

    // Don't inherit the `font-weight` (applied by a rule above).

    // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.

    //

    optgroup{

    font-weight:bold;

    }

    // Tables

    article,

    article,

    //

    //

    // Remove most spacing between table cells.

    //

    table{

    border-collapse:collapse;

    border-spacing:0;

    }

    td,

    th{

    padding:0;

    }

    aside,

    aside,

    details,/* 1 */

    details,/* 1 */

    figcaption,

    figcaption,

    figure,

    figure,

    footer,

    footer,

    header,

    header,

    main,/* 2 */

    main,/* 2 */

    menu,

    menu,

    nav,

    nav,

    section,

    section,

    summary{ /* 1 */

    summary{ /* 1 */

    display:block;

    display:block;

    }

    }

    /**

    /**

    * Add the correct display in IE 9-.改进补充IE9-的彰显形式

    * Add the correct display in IE 9-.勘误补充IE9-的展现方式

    */

    */

    audio,

    audio,

    canvas,

    canvas,

    progress,

    progress,

    video{

    video{

    display:inline-block;

    display:inline-block;

    }

    }

    /**

    /**

    * Add the correct display in iOS 4-7.革新补充iOS 4-7的显示情势

    * Add the correct display in iOS 4-7.核查补充iOS 4-7的显示形式

    */

    */

    audio:not([controls]){

    audio:not([controls]){

    display:none;

    display:none;

    height:0;

    height:0;

    }

    }

    /**

    /**

    * Add the correct vertical alignment in Chrome, Firefox, and Opera.更正补充在Chrome, Firefox, 和Opera中的垂直对齐格局

    * Add the correct vertical alignment in Chrome, Firefox, and Opera.校勘补充在Chrome, Firefox, 和Opera中的垂直对齐格局

    */

    */

    progress{

    progress{

    vertical-align:baseline;

    vertical-align:baseline;

    }

    }

    /**

    /**

    * Add the correct display in IE 10-.创新补充IE10-的展现格局

    * Add the correct display in IE 10-.改进补充IE10-的突显形式

    * 1. Add the correct display in IE.立异补充IE的展现格局

    * 1. Add the correct display in IE.革新补充IE的展现情势

    */

    */

    template,/* 1 */

    template,/* 1 */

    [hidden]{

    [hidden]{

    display:none;

    display:none;

    }

    }

    /* Links 链接

    /* Links  链接

    ========================================================================== */

    ========================================================================== */

    /**

    /**

    * Remove the gray background on active links in IE 10.去掉 IE 10 链接激活时的淡绿背景

    * Remove the gray background on active links in IE 10.去掉 IE 10 链接激活时的浅深草绿背景

    */

    */

    a{

    a{

    background-color:transparent;

    background-color:transparent;

    }

    }

    /**

    /**

    * Remove the outline on focused links when they are also active or hovered

    * Remove the outline on focused links when they are also active or hovered

    * in all browsers (opinionated).移除核心链接active和hover时的轮廓线,针对全部浏览器(自定义)

    * in all browsers (opinionated).移除核心链接active和hover时的概况线,针对具备浏览器(自定义)

    */

    */

    a:active,

    a:active,

    a:hover{

    a:hover{

    outline-width:0;

    outline-width:0;

    }

    }

    /* Text-level semantics 文本语义

    /* Text-level semantics  文本语义

    ========================================================================== */

    ========================================================================== */

    /**

    /**

    * 1. Remove the bottom border in Firefox 39-.1. 移除在Firefox 39-下的底下框

    * 1. Remove the bottom border in Firefox 39-.1. 移除在Firefox 39-下的上边框

    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 2. 考订补充在Chrome, Edge, IE, Opera, 和 Safari里的公文装饰线

    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 2. 考订补充在Chrome, Edge, IE, Opera, 和 Safari里的文件装饰线

    */

    */

    abbr[title]{

    abbr[title]{

    border-bottom:none; /* 1 */

    border-bottom:none; /* 1 */

    text-decoration:underline; /* 2 */

    text-decoration:underline; /* 2 */

    text-decoration:underline dotted; /* 2 */

    text-decoration:underline dotted; /* 2 */

    }

    }

    /**

    /**

    * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 下条法规防止在Safari 6中另行利用"bolder"

    * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 下条准则制止在Safari 6中重新使用"bolder"

    */

    */

    b,

    b,

    strong{

    strong{

    font-weight:inherit;

    font-weight:inherit;

    }

    }

    /**

    /**

    * Add the correct font weight in Chrome, Edge, and Safari.在Chrome, Edge, and Safari中改进补充font weight

    * Add the correct font weight in Chrome, Edge, and Safari.在Chrome, Edge, and Safari中勘误补充font weight

    */

    */

    b,

    b,

    strong{

    strong{

    font-weight:bolder;

    font-weight:bolder;

    }

    }

    /**

    /**

    * Add the correct font style in Android 4.3-.改正补充Android 4.3-里的font style

    * Add the correct font style in Android 4.3-.考订补充Android 4.3-里的font style

    */

    */

    dfn{

    dfn{

    font-style:italic;

    font-style:italic;

    }

    }

    /**

    /**

    * Correct the font size and margin on `h1` elements within `section` and

    * Correct the font size and margin on `h1` elements within `section` and

    * `article` contexts in Chrome, Firefox, and Safari. 改良Chrome,Firefox,Safari浏览器下`section`和`article`节点内的h1的字体大小和margin

    * `article` contexts in Chrome, Firefox, and Safari. 勘误Chrome,Firefox,Safari浏览器下`section`和`article`节点内的h1的字体大小和margin

    */

    */

    h1{

    h1{

    font-size:2em;

    font-size:2em;

    margin:0.67em 0;

    margin:0.67em 0;

    }

    }

    /**

    /**

    * Add the correct background and color in IE 9-.校订补充 IE 9- 下的 background and color

    * Add the correct background and color in IE 9-.修正补充 IE 9- 下的 background and color

    */

    */

    mark{

    mark{

    background-color:#ff0;

    background-color:#ff0;

    color:#000;

    color:#000;

    }

    }

    /**

    /**

    * Add the correct font size in all browsers.针对持有浏览器纠正补充font size

    * Add the correct font size in all browsers.针对全数浏览器立异补充font size

    */

    */

    small{

    small{

    font-size:80%;

    font-size:80%;

    }

    }

    /**

    /**

    * Prevent `sub` and `sup` elements from affecting the line height in

    * Prevent `sub` and `sup` elements from affecting the line height in

    * all browsers.防止`sub` 和 `sup`要素影响行高,针对富有浏览器

    * all browsers.防止`sub` 和 `sup`要素影响行高,针对富有浏览器

    */

    */

    sub,

    sub,

    sup{

    sup{

    font-size:75%;

    font-size:75%;

    line-height:0;

    line-height:0;

    position:relative;

    position:relative;

    vertical-align:baseline;

    vertical-align:baseline;

    }

    }

    sub{

    sub{

    bottom:-0.25em;

    bottom:-0.25em;

    }

    }

    sup{

    sup{

    top:-0.5em;

    top:-0.5em;

    }

    }

    /* Embedded content 内嵌成分

    /* Embedded content 内嵌成分

    ========================================================================== */

    ========================================================================== */

    /**

    /**

    * Remove the border on images inside links in IE 10-.去除 IE 10- a 内部 img 成分暗许的边框

    * Remove the border on images inside links in IE 10-.去除 IE 10- a 内部 img 成分私下认可的边框

    */

    */

    img{

    img{

    border-style:none;

    border-style:none;

    }

    }

    /**

    /**

    * Hide the overflow in IE.修复 IE9 中的 overflow 的奇特表现

    * Hide the overflow in IE.修复 IE9 中的 overflow 的古怪表现

    */

    */

    svg:not(:root){

    svg:not(:root){

    overflow:hidden;

    overflow:hidden;

    }

    }

    /* Grouping content 群组元素

    /* Grouping content 群组成分

    ========================================================================== */

    ========================================================================== */

    /**

    /**

    * 1. Correct the inheritance and scaling of font size in all browsers.1. 校勘在富有浏览器的字体和字体大小的持续和缩放

    * 1. Correct the inheritance and scaling of font size in all browsers.1. 修正在颇具浏览器的字体和字体大小的存在延续和缩放

    * 2. Correct the odd `em` font sizing in all browsers.2.勘误在有着浏览器的‘em’字体大小

    * 2. Correct the odd `em` font sizing in all browsers.2.改良在有着浏览器的‘em’字体大小

    */

    */

    code,

    code,

    kbd,

    kbd,

    pre,

    pre,

    samp{

    samp{

    font-family:monospace, monospace; /* 1 */

    font-family:monospace, monospace; /* 1 */

    font-size:1em; /* 2 */

    font-size:1em; /* 2 */

    }

    }

    /**

    /**

    * Add the correct margin in IE 8.改正补充IE8下的margin

    * Add the correct margin in IE 8.改正补充IE8下的margin

    */

    */

    figure{

    figure{

    margin:1em 40px;

    margin:1em 40px;

    }

    }

    /**

    /**

    * 1. Add the correct box sizing in Firefox.1.创新补充Firefox下的box-sizing

    * 1. Add the correct box sizing in Firefox.1.校正补充Firefox下的box-sizing

    * 2. Show the overflow in Edge and IE.2.在Edge 和 IE下溢出呈现

    * 2. Show the overflow in Edge and IE.2.在Edge 和 IE下溢出彰显

    */

    */

    hr{

    hr{

    box-sizing:content-box; /* 1 */

    box-sizing:content-box; /* 1 */

    height:0; /* 1 */

    height:0; /* 1 */

    overflow:visible; /* 2 */

    overflow:visible; /* 2 */

    }

    }

    /* Forms 表单

    /* Forms 表单

    ========================================================================== */

    ========================================================================== */

    /**

    /**

    * Change font properties to `inherit` in all browsers (opinionated).改字体属性为后续“inherit”,针对富有浏览器(自定义)

    * Change font properties to `inherit` in all browsers (opinionated).改字体属性为一连“inherit”,针对全体浏览器(自定义)

    */

    */

    button,

    button,

    input,

    input,

    select,

    select,

    textarea{

    textarea{

    font:inherit;

    font:inherit;

    }

    }

    /**

    /**

    * Restore the font weight unset by the previous rule.复苏font weight撤废在此以前的准则

    * Restore the font weight unset by the previous rule.复苏font weight打消在此以前的条条框框

    */

    */

    optgroup{

    optgroup{

    font-weight:bold;

    font-weight:bold;

    }

    }

    /**

    /**

    * Show the overflow in IE.在IE下溢出显示

    * Show the overflow in IE.在IE下溢出呈现

    * 1. Show the overflow in Edge.1.在Edge下溢出展现

    * 1. Show the overflow in Edge.1.在Edge下溢出展现

    * 2. Show the overflow in Edge, Firefox, and IE.2.在Edge, Firefox, 和 IE下溢出显示

    * 2. Show the overflow in Edge, Firefox, and IE.2.在艾德ge, Firefox, 和 IE下溢出展现

    */

    */

    button,

    button,

    input,/* 1 */

    input,/* 1 */

    select{ /* 2 */

    select{ /* 2 */

    overflow:visible;

    overflow:visible;

    }

    }

    /**

    /**

    * Remove the margin in Safari.移除Safari下的margin

    * Remove the margin in Safari.移除Safari下的margin

    * 1. Remove the margin in Firefox and Safari.1.移除Safari和Firefox下的margin

    * 1. Remove the margin in Firefox and Safari.1.移除Safari和Firefox下的margin

    */

    */

    button,

    button,

    input,

    input,

    select,

    select,

    textarea{ /* 1 */

    textarea{ /* 1 */

    margin:0;

    margin:0;

    }

    }

    /**

    /**

    * Remove the inheritence of text transform in Edge, Firefox, and IE.移除在Edge, Firefox, 和 IE里的text-transform的继承

    * Remove the inheritence of text transform in Edge, Firefox, and IE.移除在Edge, Firefox, 和 IE里的text-transform的继承

    * 1. Remove the inheritence of text transform in Firefox.1.移除在Firefox里text-transform的继承

    * 1. Remove the inheritence of text transform in Firefox.1.移除在Firefox里text-transform的继承

    */

    */

    button,

    button,

    select{ /* 1 */

    select{ /* 1 */

    text-transform:none;

    text-transform:none;

    }

    }

    /**

    /**

    * Change the cursor in all browsers (opinionated).改光标为手型,针对富有浏览器(自定义)

    * Change the cursor in all browsers (opinionated).改光标为手型,针对全数浏览器(自定义)

    */

    */

    button,

    button,

    [type="button"],

    [type="button"],

    [type="reset"],

    [type="reset"],

    [type="submit"]{

    [type="submit"]{

    cursor:pointer;

    cursor:pointer;

    }

    }

    /**

    /**

    * Restore the default cursor to disabled elements unset by the previous rule.恢复生机disabled成分的默许光标,撤除从前的平整。

    * Restore the default cursor to disabled elements unset by the previous rule.复苏disabled成分的私下认可光标,裁撤以前的条条框框。

    */

    */

    [disabled]{

    [disabled]{

    cursor:default;

    cursor:default;

    }

    }

    /**

    /**

    * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`

    * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`

    * controls in Android 4.1. 幸免Web基特的bug(2)破坏原生`audio‘和 `video ` 调整条,在安卓4的本子下

    *    controls in Android 4.1. 幸免WebKit的bug(2)破坏原生`audio‘和 `video ` 调整条,在安卓4的版本下

    * 2. Correct the inability to style clickable types in iOS.2. 校对在IOS下不得点击的bug

    * 2. Correct the inability to style clickable types in iOS.2. 纠正在IOS下不得点击的bug

    */

    */

    button,

    button,

    html [type="button"],/* 1 */

    html [type="button"],/* 1 */

    [type="reset"],

    [type="reset"],

    [type="submit"]{

    [type="submit"]{

    -webkit-appearance:button; /* 2 */

    -webkit-appearance:button; /* 2 */

    }

    }

    /**

    /**

    * Remove the inner border and padding in Firefox.移除Firefox中的border和padding

    * Remove the inner border and padding in Firefox.移除Firefox中的border和padding

    */

    */

    button::-moz-focus-inner,

    button::-moz-focus-inner,

    input::-moz-focus-inner{

    input::-moz-focus-inner{

    border:0;

    border:0;

    padding:0;

    padding:0;

    }

    }

    /**

    /**

    * Restore the focus styles unset by the previous rule.通过复苏原先的准则打消设置的focus样式。

    * Restore the focus styles unset by the previous rule.通过苏醒原先的平整打消设置的focus样式。

    */

    */

    button:-moz-focusring,

    button:-moz-focusring,

    input:-moz-focusring{

    input:-moz-focusring{

    outline:1px dotted ButtonText;

    outline:1px dotted ButtonText;

    }

    }

    /**

    /**

    * Change the border, margin, and padding in all browsers (opinionated).退换border, margin, 和 padding,针对富有的浏览器(自定义)

    * Change the border, margin, and padding in all browsers (opinionated).改动border, margin, 和 padding,针对具备的浏览器(自定义)

    */

    */

    fieldset{

    fieldset{

    border:1px solid #c0c0c0;

    border:1px solid #c0c0c0;

    margin:0 2px;

    margin:0 2px;

    padding:0.35em 0.625em 0.75em;

    padding:0.35em 0.625em 0.75em;

    }

    }

    /**

    /**

    * 1. Correct the text wrapping in Edge and IE.1.纠正Edge和IE中的文字换行。

    * 1. Correct the text wrapping in Edge and IE.1.修正Edge和IE中的文字换行。

    * 2. Correct the color inheritance from `fieldset` elements in IE.2.纠正在IE浏览器`fieldset`要素的书体颜色承袭。

    * 2. Correct the color inheritance from `fieldset` elements in IE.2.纠正在IE浏览器`fieldset`要素的书体颜色承袭。

    * 3. Remove the padding so developers are not caught out when they zero out

    * 3. Remove the padding so developers are not caught out when they zero out

    * `fieldset` elements in all browsers.3. 移除padding针对富有浏览器

    *    `fieldset` elements in all browsers.3. 移除padding针对具备浏览器

    */

    */

    legend{

    legend{

    box-sizing:border-box; /* 1 */

    box-sizing:border-box; /* 1 */

    color:inherit; /* 2 */

    color:inherit; /* 2 */

    display:table; /* 1 */

    display:table; /* 1 */

    max-width:100%; /* 1 */

    max-width:100%; /* 1 */

    padding:0; /* 3 */

    padding:0; /* 3 */

    white-space:normal; /* 1 */

    white-space:normal; /* 1 */

    }

    }

    /**

    /**

    * Remove the default vertical scrollbar in IE.移除IE浏览器中默许的垂直滚动条

    * Remove the default vertical scrollbar in IE.移除IE浏览器中默许的垂直滚动条

    */

    */

    textarea{

    textarea{

    overflow:auto;

    overflow:auto;

    }

    }

    /**

    /**

    * 1. Add the correct box sizing in IE 10-.1.核对补充box sizing,在IE 10-浏览器

    * 1. Add the correct box sizing in IE 10-.1.订正补充box sizing,在IE 10-浏览器

    * 2. Remove the padding in IE 10-.2.移除padding在IE 10-浏览器

    * 2. Remove the padding in IE 10-.2.移除padding在IE 10-浏览器

    */

    */

    [type="checkbox"],

    [type="checkbox"],

    [type="radio"]{

    [type="radio"]{

    box-sizing:border-box; /* 1 */

    box-sizing:border-box; /* 1 */

    padding:0; /* 2 */

    padding:0; /* 2 */

    }

    }

    /**

    /**

    * Correct the cursor style of increment and decrement buttons in Chrome.更正在Chrome递增和递减按键光标样式

    * Correct the cursor style of increment and decrement buttons in Chrome.校勘在Chrome递增和递减开关光标准样品式

    */

    */

    [type="number"]::-webkit-inner-spin-button,

    [type="number"]::-webkit-inner-spin-button,

    [type="number"]::-webkit-outer-spin-button{

    [type="number"]::-webkit-outer-spin-button{

    height:auto;

    height:auto;

    }

    }

    /**

    /**

    * Correct the odd appearance of search inputs in Chrome and Safari.校勘search在Chrome和Safari奇怪的榜样

    * Correct the odd appearance of search inputs in Chrome and Safari.校订search在Chrome和Safari古怪的理当如此

    */

    */

    [type="search"]{

    [type="search"]{

    -webkit-appearance:textfield;

    -webkit-appearance:textfield;

    }

    }

    /**

    /**

    * Remove the inner padding and cancel buttons in Chrome on OS X and

    * Remove the inner padding and cancel buttons in Chrome on OS X and

    * Safari on OS X.移除padding和撤废按键在Chrome OS X 和 Safari OS X。

    * Safari on OS X.移除padding和撤回按键在Chrome OS X 和 Safari OS X。

    */

    */

    [type="search"]::-webkit-search-cancel-button,

    [type="search"]::-webkit-search-cancel-button,

    [type="search"]::-webkit-search-decoration{

    [type="search"]::-webkit-search-decoration{

    -webkit-appearance:none;

    -webkit-appearance:none;

    }

    }

    压缩版:

    压缩版:

    /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

    /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

    html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

    html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

    body{margin:0}

    body{margin:0}

    article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

    article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}

    audio,canvas,progress,video{display:inline-block}

    audio,canvas,progress,video{display:inline-block}

    audio:not([controls]){display:none;height:0}

    audio:not([controls]){display:none;height:0}

    progress{vertical-align:baseline}

    progress{vertical-align:baseline}

    [hidden],template{display:none}

    [hidden],template{display:none}

    a{background-color:transparent}

    a{background-color:transparent}

    a:active,a:hover{outline-width:0}

    a:active,a:hover{outline-width:0}

    abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

    abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

    b,strong{font-weight:inherit;font-weight:bolder}

    b,strong{font-weight:inherit;font-weight:bolder}

    dfn{font-style:italic}

    dfn{font-style:italic}

    h1{margin:.67em 0;font-size:2em}

    h1{margin:.67em 0;font-size:2em}

    mark{background-color:#ff0;color:#000}

    mark{background-color:#ff0;color:#000}

    small{font-size:80%}

    small{font-size:80%}

    sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}

    sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}

    sub{bottom:-.25em}

    sub{bottom:-.25em}

    sup{top:-.5em}

    sup{top:-.5em}

    img{border-style:none}

    img{border-style:none}

    svg:not(:root){overflow:hidden}

    svg:not(:root){overflow:hidden}

    code,kbd,pre,samp{font-size:1em;font-family:monospace}

    code,kbd,pre,samp{font-size:1em;font-family:monospace}

    figure{margin:1em 40px}

    figure{margin:1em 40px}

    hr{overflow:visible;box-sizing:content-box;height:0}

    hr{overflow:visible;box-sizing:content-box;height:0}

    button,input,select,textarea{font:inherit}

    button,input,select,textarea{font:inherit}

    optgroup{font-weight:700}

    optgroup{font-weight:700}

    button,input,select{overflow:visible}

    button,input,select{overflow:visible}

    button,input,select,textarea{margin:0}

    button,input,select,textarea{margin:0}

    button,select{text-transform:none}

    button,select{text-transform:none}

    [type=button],[type=reset],[type=submit],button{cursor:pointer}

    [type=button],[type=reset],[type=submit],button{cursor:pointer}

    [disabled]{cursor:default}

    [disabled]{cursor:default}

    [type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}

    [type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}

    新葡亰496net0英汉对照版,源码解读。button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}

    button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}

    button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}

    button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}

    fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}

    fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}

    legend{display:table;box-sizing:border-box;padding:0;max-width:100%;color:inherit;white-space:normal}

    legend{display:table;box-sizing:border-box;padding:0;max-width:100%;color:inherit;white-space:normal}

    textarea{overflow:auto}

    textarea{overflow:auto}

    [type=checkbox],[type=radio]{box-sizing:border-box;padding:0}

    [type=checkbox],[type=radio]{box-sizing:border-box;padding:0}

    [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

    [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

    [type=search]{-webkit-appearance:textfield}

    [type=search]{-webkit-appearance:textfield}

    [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

    [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net0英汉对照版,源码解读

    关键词: