zoukankan      html  css  js  c++  java
  • [CSS] CSS实践CSS Reset

    概述

        Web项目中我们经常会使用到CSS Reset这个概念。那么CSS Reset是什么了。我们知道不同的浏览器对HTML标签默认的样式是有差别的,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而在Firefox下,它的缩进是由padding实现的。在实际开发中,浏览器的默认样式会给我带来很多意想不到的麻烦。省去这些麻烦的方式--一开始就将浏览器的默认样式全部覆盖。这就引申出CSS Reset概念。最简单的说法CSS Reset就是把浏览器提供的默认样式覆盖掉。

    CSS Rest 内容

        项目中我们常用一下的代码进行Rest CSS。

    View Code
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video
    {
      margin
    : 0;
      padding
    : 0;
      border
    : 0;
      outline
    : 0;
      font-size
    : 100%;
      font
    : inherit;
      vertical-align
    : baseline;
    }

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

    body
    {
      cursor
    : default;
      line-height
    : 1;
    }

    ol,
    ul
    {
      list-style
    : none;
    }

    blockquote,
    q
    {
      quotes
    : none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after
    {
      content
    : '';
      content
    : none;
    }

    table
    {
      border-collapse
    : collapse;
      border-spacing
    : 0;
    }

    input,
    select
    {
      vertical-align
    : middle;
    }

    CSS Rest 引用  

        http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/ (Reset Styles)

        http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/  (Reworked Reset)

        http://meyerweb.com/eric/tools/css/reset/index.html  (CSS Tools: Reset CSS)
       (如果有需要的话,我可以对这些文章进行翻译)
  • 相关阅读:
    C# 获取命名空间对应的程序集位置
    启用/禁用以太网的批处理,用于一个网卡切换本地网络和wifi使用(Win10)
    Gogs/Gitea 在 docker 中部署
    bash echo color
    python运行httpserver
    更改当前启动项,开关Hyper-V
    Win10更改CMD控制台的代码页和字体和字号
    ubuntu 编译 vim+lua
    CPU Usage (C#) 测试
    单击改变input的边框颜色
  • 原文地址:https://www.cnblogs.com/youngC/p/2625786.html
Copyright © 2011-2022 走看看