在使用css的时候少不了会在某一html页面通过style标签写自己的样式，但是在html页面中将style的内容放置在head和body里面有什么区别呢？
1、打开head里面的style，关闭body里面的style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试style的位置在head里面与body里面的区别</title>
<style type="text/css">
/*head里面的style标签*/
#test{
width: 50px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div id="test">123</div>
<!--body里面的style标签-->
<!--<style type="text/css">
#test{
width: 100px;
height: 50px;
background: blue;
}
</style>-->
</body>
</html>
效果：
2、关闭head里面的style，打开body里面的style
效果：
3、同时打开head里面的style与body里面的style标签
效果：
总结：
优先级不同，就近原则，离标签越近的style优先级越高，body的优先级高于head，而在这个程序中，在同时打开两个style的时候，由于body的优先级高于head，body里的style离界面的dom结点更近，故先按照body里面的style渲染页面。