引入style的位置在head裡與在body裡的區別1
阿新 • • 發佈：2018-11-11
在使用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渲染頁面。