万物皆是 div? 让span == div !,解释为什么同样的样式不同浏览器显示的内容会不同

969 阅读1分钟

在语义化的HTML的定义下 ,div 和span 没有特别的意义,如果我们在没有特别适用的标签时候就用他们,万事万物皆是div,但这是一个非常不好的习惯, 或者你觉得两个的唯一区别就是div 是块级元素,span 是行内元素。但是其实不管是div 还是span 这两者的 dispaly 的设置其实是相同的。 这里我们就看一下浏览器解析 div 跟span的 区别吧

<body>
  <div> this is div</div>
  <span> this is div</span>
</body>

image.png 这里我们就可以看得出我们,我们在没有写任何样式代码的前提下,浏览器解析出来的div 的默认display 为block 这是由于每个浏览器都有一套预设的样式 叫user agent styleshee

image.png

于是如果我们把div 的display 改成 initial 他也就成了行内元素, 所从css 的角度来讲 不管是div 还是span 他们的display 都是行内元素(inline),只是在浏览器的角度来看,他们是不同的!

user agent styleshee 对body 也有一定的设置 ,body预设的margin 8px, image.png

这也就解释了什么每次我们在写项目的时候 一开始就要清空 body, div 的预设样式,每个浏览器的预设值的不同