HTML 元素标签在浏览器中默认样式介绍和重置方法

发布于 2019-04-10 19:58:36 字数 2123 浏览 3149 评论 0

做网页的都知道，浏览器的兼容一直都是持久的话题和问题，每个浏览器对于网页的渲染效果略有差异，但也不是完全不同，这篇将为您介绍HTML元素标签在浏览器中默认样式，以及如何重置这些样式。

不同浏览器对于相同元素的默认样式并不一致，这是我们都知道的，那么到底有那些默认样式不同，如何快速方便的覆盖这些默认样式，如何更加优雅的编写我们的CSS代码，带着这些问题，我们进入本文的正文。

基本上，不同内核的两个浏览器在某些元素的表现都会存在差异，比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好，在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来，我都是浏览器默认样式在作怪。因此，我们在生成 CSS 样式规则的时候，一个必做的步骤就是重设浏览器的默认样式，也就是覆盖掉浏览器的默认样式。

填充 Padding 和间距 Margin

在所有浏览器中，<body>、<ul>、<p>、<dl>等元素会有一定的间距和填充，这就是为什么我们要在CSS的开始部分加入* {padding:0;marging:0}，使用通配符选择器*选择所有元素，清除所有元素的填充和间距。其实这样的编写并不好，因为有的元素并没有填充和间距，那么如何编写高效率的CSS代码呢？我们可以指定某个元素，然后消除他的默认样式，比如下面的代码：

body, li, dd, p, h1, menu,
h2, h3, dl, ul, h4, h5, h6,
table, td, th, tr {
  margin: 0; padding: 0;
}

字体样式

我们一般会给 body 元素设置网页基准的字体、行距和字体颜色，例如下面的代码：

body{
  font:12px/1.6 Arial, 'microsoft yahei', simsun;
  color: #333;
}

这个设置可以覆盖网页中大多数元素的样式，但是表单元素还是显示默认样式，这时候要想获得一致的显示效果，我们还要加上表单元素的样式。

body, textarea, select, input {
  font:12px/1.6 Arial, 'microsoft yahei', simsun;
  color: #333;
}

对于表单元素，使用通配符 * 来简单地设定全局样式，会严重破坏这些表单元素的外观，所以你又不得不去手动去一一为它们重新设定，所以我们应该放弃简单地使用 *，而是为第一个存在表现不一致的元素进行重设。

加粗斜体和缩进

元素的默认样式可能会破坏页面的外观。比如 <b> 元素会把文字加粗，<blockquote> 会大段缩进，<em> 会使文字倾斜等，如果你想要求页面文本外观一致的话，也应该在 CSS 中把这些元素的外观进行重设。同时有时候我们要求这些元素的外观和父元素一样，可以直接使用 inherit 从父元素继承即可。

blockquote, q {
  quotes:none;
}
blockquote:before,
blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}
hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}