放在其他位置可以实现,但是不建议。
可以在编辑器当中尝试如下代码:
<!doctype html>在浏览器显示效果当中,两个div均存在1像素红色实线边框。也就是说,style标签书写在body标签中时代码生效,div得到了style标签中设置得具体样式效果。
style并不仅仅可以放置在<html>标签之内,<body></body>之后,甚至可以放在</html>标签的后面。
虽然style标签的位置随意,但是并不推荐将它放置在<head></head>标签之外。主要原因有以下两点:
不便于维护:当style标签放置到body标签中,工程师在后期维护时,就需要花额外的时间进行寻找,在密密麻麻的代码当中寻找某种样式并进行修改,或者调试是否因为某种样式而引发的问题,绝对是一件让人心烦的事情。
会引起页面回流与重绘,从而降低加载速度。网页是由DOM Tree(也就是各个标签)和样式结构体组合后构建成的render tree。render tree构建完成后,浏览器就会根据render tree来进行页面的绘制。
页面回流:当render tree中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而引起的页面重新渲染(或者叫作重新构建绘制)。
页面重绘:当render tree中的一些元素需要更新属性,但这些属性只会影响元素的外观、风格,而不会影响到元素的布局,此类的页面渲染叫作页面重绘。
由于网页文档是自上而下加载并解析的,假设将style标签书写在了</body>的后面,在读取到style标签之前,整个网页文档已经渲染得差不多了,这时候突然发现存在一个style标签,并且style标签中的内容针对网页中某些元素的样式进行了设置,于是浏览器只好重新为每个元素计算样式,再加载出来。这会导致网页的加载速度的变慢。