浏览器的默认样式

body

margin:10px; // 重置 margin:0; (浏览器不同间距可能不相同)

h1-h6 标题

margin:(不同);  // 重置 margin:0;
font-size:(不同); 
font-weight:bold;  // 重置 font-weight:normal;

a

text-decoration:underline;  // 重置 text-decoration: none;
color:#00E;  //重置 color:#f60; (根据需要修改颜色)

b

font-weight:bold;  // 重置 font-weight:normal;

i

font-style:italic;  // 重置 font-style:normal;

button

background-color:#F0F0F0; // 根据需要修改颜色
border:3px outset; // 重置 border:none; 

dd

margin:0 0 0 40px; // 重置 margin:0;

dl

margin:1em 0; // 重置 margin:0;

ol

padding:0 0 0 30pt; // 重置 padding:0;

li

 list-style-type: disc; // 重置  list-style: none;

em

font-style:italic; // 重置 font-style:normal;

del

text-decoration:line-through; // 重置 text-decoration: none;

input

border:2px inset; // 重置 border:none; 

以上列了一些常用的标签浏览器默认样式,浏览器不同,标签样式也会不同,所以需要重置浏览器样式,使页面在不同浏览器下都能有相同的效果。下面贴一下平时用的页面重置样式。

注意:重置样式需要写在样式文件的最上面,当通过公共样式文件引用时,也需要第一个引用它,然后再引其它样式

@charset "UTF-8";
html {
  min-height: 100%;
  font-family: "Microsoft YaHei", sans-serif; }

address, caption, cite, code, dfn, em, th, var {
  font-style: normal; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, input, button, textarea, p, blockquote, th, td, address {
  padding: 0;
  margin: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  -o-appearance: none; }

img, input, select {
  border: 0;
  vertical-align: middle; }

ul, ol {
  list-style: none outside none; }

a, div, select {
  -webkit-tap-highlight-color: transparent; }

.clearfix:before, .clearfix:after {
  display: table;
  content: ""; }

.clearfix:after {
  clear: both; }

::-webkit-inner-spin-button {
  -webkit-appearance: none; }

a, a:link, a:visited, a:focus {
  text-decoration: none; }

你可能感兴趣的:(浏览器的默认样式)