CSS Reset

什么是CSS Reset?

• CSS Reset 顾名思义就是重置样式表中的样式的,更准确来说是重置浏览器默认样式(user agent stylesheet)

为什么使用CSS Reset?

• HTML标签在浏览器都有默认的样式,不同的浏览器都有不同的内核,浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容 例如 <input type="submit" value="">标签 默认在Chrome浏览器是16*21 而在火狐是 22*22 从而导致了浏览器兼容问题的出现,因此为了方便我们的布局,我们在写CSS的时候就会把默认的样式去除,更准确来说是层叠浏览器默认样式

常见CSS Reset-1

<style>
*{
  padding: 0;
  margin: 0;
}
 </style>

• 这种CSS Reset极力不推荐,原因如下
  1. *选择器在渲染的时候,会遍历整个HTML文档,影响性能

常见CSS Reset-2

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
代码如下:

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li
,h1,h2,h3,h4,h5,h6,pre,code
,form,fieldset,legend,input
,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code
,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{
font-family:inherit;font-size:inherit;
font-weight:inherit;
*font-size:100%
}
legend{color:#000}

• 我们截取重置内外边距来做分析

body,div,dl,dt,dd,ul,ol,li
,h1,h2,h3,h4,h5,h6,pre,code
,form,fieldset,legend,input
,textarea,p,blockquote,th,td{margin:0;padding:0}

• 请回答以下问题:
  1. 你在实际项目中使用了code pre fieldset标签吗?
  2. div有默认的边距吗?
  3. 你的CSS Reset是ctrl + c ctrl + v 的吗?

那些所谓需要重置的标签

https://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/

编写一套属于自己的CSS Reset

• 从SEO来说一个页面只能有一个H1标签,可以忽略不计
• 单独编写ul,ol

  ul,ol{padding:0;list-style:none;}
  

• 去除文本输入框,提交按钮去除焦点高光

    input,button{outline: none;}
  

• img标签默认留白问题

    img{vertical-align:bottom;}
  

• 添加鼠标手型

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

• 去除按钮默认边框和内边距

  input[type=button],input[type=submit],button{border: none;padding: 0;}
  

结语:只有适合自己的才是最好的

本人初次研究CSS Reset 有不足之处 还望各位大佬补充