zoukankan      html  css  js  c++  java
  • 关于 CSS Reset

    相信对 CSS 使用有一定经验的童鞋应该都听过 CSS reset 这个概念,想腾讯等大型网站的 CSS 文件中也必定要一段 reset ,那么 CSS reset 究竟是什么呢?

    CSS reset 不是一种技术,而且一段 CSS ,正如它的名字那样,重置样式。 HTML 标签在浏览器里是有默认的样式,例如 a 标签会有下划线,p 标签会有上下边距,而且这些标签的默认样式在不同的浏览器中可能是不同的,比如 ui 标签默认会有缩进, IE 是利用 margin 实现的,而 Firefox 和 chrome 是利用 padding 实现的。因此在前端开发的过程中这种不统一的默认样式会给开发者带来很多麻烦,因此需要写一段 CSS reset 的样式覆盖了原本不统一的默认样式。

    CSS reset 可以根据自身的情况自定义,只要能实现统一样式的效果就行了,写出一段完整、高效的 CSS 后就可以应用于自己开发的所有项目了,下面分享一下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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,font,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{margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
    body{line-height: 1; text-align: left; }
    ol,ul{list-style: none; }
    blockquote,q{quotes: none; }
    blockquote: before,blockquote: after,q: before,q: after{content: ''; content: none; }
    : focus {outline: 0; }
    ins{text-decoration: none; }
    del{text-decoration: line-through; }
    table{border-collapse: collapse; border-spacing: 0; }

    在这段 CSS reset 里,对各种容器,表格等标签设定 padding 和 margin 为 0, font-size 为 100% ,这些都是为了统一样式,这个也是 CSS reset 的核心。

  • 相关阅读:
    Ftp、Ftps与Sftp之间的区别
    Previous Workflow Versions in Nintex Workflow
    Span<T>
    .NET Core 2.0及.NET Standard 2.0 Description
    Announcing Windows Template Studio in UWP
    安装.Net Standard 2.0, Impressive
    SQL 给视图赋权限
    Visual Studio for Mac中的ASP.NET Core
    How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1
    用于Azure功能的Visual Studio 2017工具
  • 原文地址:https://www.cnblogs.com/ginikeer/p/3653129.html
Copyright © 2011-2022 走看看