非常好用的CSS样式重置表

 
        我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果。所以一个好的重置样式表是非常重要的。用过很多网上现成的样式重置表,然后有时写的样式代码没问题却达不到自己要的效果,查了才发现是掉进reset.css的坑里。这里推荐用过多种reset.css感觉是最好用的重置样式表:Sandal,这个样式表的好处是他绝大多数的保留了标签的常用效果,并不是简单粗暴的全部掩杀。具体样式如下,可以直接整个复制在自己的reset.css中:
  html { 
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    height: 100%; 
  } 
  body { 
    margin: 0;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    #fff;
    min-height: 100%;
  } 
  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section,summary { 
    display: block; 
  } 
  audio, canvas, progress, video { 
    display: inline-block; 
  } 
  audio:not([controls]) { 
    display: none;
    height: 0; 
  } 
  progress { 
    vertical-align: baseline; 
  } 
  [hidden], template { 
    display: none; 
  } 
  a {
    background: transparent;
    text-decoration: none;
    color: #08c;
  } 
  a:active { 
    outline: 0; 
  } 
  abbr[title] { 
    border-bottom: 1px dotted; 
  } 
  b, strong { 
    font-weight: bold; 
  } 
  dfn { 
    font-style: italic; 
  } 
  mark { 
    background: #ff0; color: #000; 
  } 
  small { 
    font-size: 80%; 
  } 
  sub, sup { 
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  } 
  sup { 
    top: -0.5em; 
  } 
  sub { 
    bottom: -0.25em; 
  } 
  img { 
    max-width: 100%;
    border: 0;
    vertical-align: middle;
  } 
  svg:not(:root) { 
    overflow: hidden; 
  } 
  pre { 
    overflow: auto;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  } 
  code, kbd, pre, samp { 
    font-family: monospace, monospace;
    font-size: 1em; 
  } 
  button, input, optgroup, select, textarea { 
    color: inherit;
    font: inherit;
    margin: 0;
    vertical-align: middle; 
  } 
  button, input, select { 
    overflow: visible; 
  } 
  button, select { 
    text-transform: none; 
  } 
  button, html input[type="button"], input[type="reset"], input[type="submit"] { 
    -webkit-appearance: button;
    cursor: pointer; 
  } 
  [disabled] { 
    cursor: default; 
  } 
  button::-moz-focus-inner, input::-moz-focus-inner { 
    border: 0;
    padding: 0; 
  } 
  input { 
    line-height: normal; 
  } 
  input[type="checkbox"], input[type="radio"] { 
    box-sizing: border-box;
    padding: 0;
  } 
  input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 
    height: auto; 
  }
  input[type="search"] { 
    -webkit-appearance: textfield;
    box-sizing: border-box; 
  }
   input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 
    -webkit-appearance: none; 
  }
  fieldset { 
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em; 
  } 
  legend { 
    border: 0;
    padding: 0; 
  } 
  textarea { 
    overflow: auto;
    resize: vertical;
    vertical-align: top; 
  } 
  optgroup { 
    font-weight: bold; 
  } 
  input, select, textarea { 
    outline: 0; 
  } 
  textarea, input { 
    -webkit-user-modify: read-write-plaintext-only; 
  } 
  input::-ms-clear, input::-ms-reveal { 
    display: none; 
  } 
  input::-moz-placeholder, textarea::-moz-placeholder { 
    color: #999; 
  } 
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color: #999; 
  } 
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999; 
  } 
  .placeholder { 
    color: #999; 
  } 
  table { 
    border-collapse: collapse;
    border-spacing: 0; 
  } 
  td, th { 
    padding: 0; 
  } 
  h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { 
    margin: 0; 
  } 
  ul, ol, li, dl, dd { 
    margin: 0; padding: 0; 
  } 
  ul, ol {
    list-style: none outside none; 
  } 
  h1, h2, h3 { 
    line-height: 2;
    font-weight: normal; 
  } 
  h1 { 
    font-size: 18px; 
  } 
  h2 { 
    font-size: 16px; 
  } 
  h3 { 
    font-size: 14px; 
  } 
  i { 
    font-style: normal; 
  } 
  * { 
    box-sizing: border-box; 
  } 
  .clearfix::before, .clearfix::after { 
    content: "";
    display: table; 
  } 
  .clearfix::after { 
    clear: both; 
  }
 
 
        基本的样式重置就这些,剩下自定义的就自己往里面添加。这份样式表放在这里方便以后自己使用,也希望能帮到有需要的你们。

非常好用的CSS样式重置表的更多相关文章

  1. css样式重置表

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...

  2. 分享一下自己在用的CSS样式重置代码

    通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...

  3. css扁平化博客学习总结(二)css样式重置

    css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, block ...

  4. css样式重置 移动端适配

    css  默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...

  5. CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

    一.CSS简介:  w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...

  6. 常见网站CSS样式重置

    腾讯 1 2 3 4 5 6 7 8 9 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea, ...

  7. css样式重置,不建议用通配符

    由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性 ...

  8. css样式重置(初始化)收集

    淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fields ...

  9. 封装好通用的reset.css base.css 样式重置css文件

    一般是叫reset.css 我这边命名成base.css 哎呀无所谓…… @charset "UTF-8"; /*css reset*/ /*清除内外边距*/ body, h1, ...

随机推荐

  1. 深入理解jvm jdk1,7(1)

    java 虚拟机管理的内存模型包含以下几个运行时数据区域: 程序计数器: 程序计数器是一块较小的内存空间,它可以看成当前线程执行的字节码的行号指示器.在虚拟机的概念模型里(仅是概念模型,各种虚拟机可能 ...

  2. https微信分享看不到图片的坑

    最近在做一个活动项目的时候一开始走的http,发现网络被劫持的特别严重,没办法,只能改走https,但是修改为https后发现在使用微信js-sdk分享的时候看不到缩略图,直接通过地址打开是可以找开图 ...

  3. 从零开始的全栈工程师——js篇2.6

    函数 Var 是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. Var可以在内存模块提前(js代码执行前)完成所以有变量提升这个功能. 因为a没有带var,所以不存在变量 ...

  4. 属性,选择器和css

    一.属性 属性:表示事物的一些特征 属性分为标签属性和样式属性 标签属性:<img src="1.jpg" width="200px" heifht=&q ...

  5. Spring Boot 的配置文件application.properties

    Spring Boot 中的application.properties 是一个全局的配置文件,放在src/main/resources 目录下或者类路径的/config下. 作为全局配置文件的app ...

  6. JSP注释格式

    一.JSP注释格式来源 JSP是Sun Microsystems公司制定的一种服务器端动态网页技术的组件规范,其主体由HTML.CSS.JavaScript和Java拼凑组成. 正是因为JSP是一种组 ...

  7. jenkins代码自动部署

    jenkins是一个广泛用于持续构建的可视化web工具,持续构建说得更直白点,就是各种项目的"自动化"编译.打包.分发部署.jenkins可以很好的支持各种语言(比如:java, ...

  8. hihoCoder #1143 : 骨牌覆盖问题·一 (斐波那契数列)

    题意:我们有一个2xN的长条形棋盘,然后用1x2的骨牌去覆盖整个棋盘.对于这个棋盘,一共有多少种不同的覆盖方法呢? 思路:这是斐波那契数列啊,f[n] = f[n-1] + f[n-2],初始时 f[ ...

  9. pat乙级1050螺旋矩阵

    1.用vector建立二维数组: vector<vector<int>> arr(rows); ; i < rows; i++) arr[i].resize(cols); ...

  10. python_9_for

    #1 for i in range(10):#默认从0开始,步长为1 print("loop",i) #2 for i in range(0,10,1):#步长为1 print(& ...