浏览器默认样式整理

在css属性计算过程中，环节之一，是从浏览器默认样式表中取值，如果对css属性计算过程不太熟悉，推荐这篇文章《CSS 属性计算过程》。

由此可见，浏览器默认样式对网页布局的影响是巨大的，如果没有这些默认样式，网页中各种盒子的排列将会乱成一团！

所以，本文帮助梳理了一下各大浏览器的默认样式，相信大家在看完后，对css布局和浏览器兼容性会有更深刻的理解。

让我们先来看看有哪些主流浏览器，以及这些主流浏览器对应的引擎是什么：

想必大家对这些浏览器应该都不陌生，这里就只介绍一下Microsoft Edge浏览器 吧，它是微软公司开发的Web浏览器，是IE浏览器的继承者。

而说起IE浏览器，它在市场领域一直备受争议。

它曾经是全球市场份额最大 的浏览器，也曾经被指控滥用微软公司在操作系统市场上的垄断地位，以压制其他浏览器的发展，导致了微软公司在欧盟和美国等地被罚款。

后来，随着其他浏览器的崛起，IE浏览器的市场份额逐渐下降，微软公司也放弃IE浏览器的开发，转而推出新的浏览器Edge。

现今，除了企业和政府等领域，基本用不到IE浏览器了。

IE浏览器的衰败跟它的一些特性是分不开的，比如下面的这几点：

而更新迭代后的Edge浏览器，采用全新的EdgeHTML内核 ，几乎抛弃了所有IE特性 ，它的技术架构和开发标准也尽量与火狐、谷歌等主流浏览器保持一致。

在简单的了解了五款主流的浏览器之后，再来看一下它们使用的四种引擎，它们分别是Blink引擎 、Gecko引擎 、WebKit引擎 和EdgeHTML引擎。

以下是它们的源码的默认样式地址：

需要说明一下的是，EdgeHTML引擎原本是在微软的GitHub上托管，但自2020年3月起，微软停止了对EdgeHTML的更新和维护，因此，目前EdgeHTML引擎源码已不再公开发布。

然后，重点来看一下这些默认样式的内容，它们是啥样的呢？

通过观察，我们可以看到，所有引擎的默认样式代码中，较大篇幅都是对各种html元素的display属性的重新赋值。

我猜测，这种共性的形成，起源可能是html5提出的新规范：HTML只规定元素的语义，而元素的样式部分，包括它是属于块级元素或者行内元素等，统一交给css处理。

也就是说，在html5以前，每个html元素是块级元素还是行级元素都是规定好的 ，这是能找到的关于html4的默认样式文档(现在已作废了)：www.w3.org/TR/CSS21/sa...

所以，在html5规范出来后，元素的样式定义，由原来的html自带的规范，变成了由浏览器的默认样式提供。

严格意义上来说，现在不能再用"块级元素"、"行级元素"去称呼html元素了 ，因为本质上，元素没有块级和行级的区别了，只有css的display属性值的不同。

所以，现在可以这样问，某个元素，它的盒模型(属于css部分)，是块盒、行盒，还是行块盒呢？

最后，我还想说明的是，不同浏览器的默认样式之间，它们也是有差异的。

因为可想而知，虽然浏览器们经过长时间的发展，都会向着web规范靠拢，导致越来越兼容，但是不管如何，毕竟也还会有差异。

如果我们希望自己的网页能在所有的浏览器保持一模一样，则可以通过CSS重置 进行处理，一些流行的CSS重置库包括reset.css 或 Normalize.css。

总结

浏览器们会针对某些css属性，重新定义了它们的默认值，这样的css属性主要是display，当然也包含其它的。

经过长期发展，特别是在html5规范出现后，浏览器默认样式的规范偏向统一，但目前在细节上还有较大差异性。