Js 中一系列寬度和高度的學習
在學習元素一系列寬度和高度之前，我們先來看一個平時開發中幾乎不會遇到的問題，那就是html文檔聲明<!DOCTYPE html> 確實會對元素的寬高產生影響。幾乎不會遇到，是因為我們在寫html 文件時，編輯器會自動幫助我們生成html文件的模版。在vs code中, 按 !，再加enter或tab 鍵，就生成了，非常簡單方便。而它最開始的一行就是<!DOCTYPE html>
而我在這裏卻遇到了沒有寫文檔聲明的html 文件，是因為我在學習h5 的history api 實現路由時，突然想到要學習width 和height 知識的，也不是完全突然，因為這兩個知識點是在同步學習的。在學習時history api 時，我新建了一個空html文件，直接把別的人代碼復制過來了，而代碼中確實沒有文檔聲明， 這是以後在查找問題是發現的。
這個html 文件很簡單，路由嗎，就是4個點擊按鈕，一個渲染區域。
<head> <style type="text/css"> .Panel { width: 200px; height: 100px; background: red; display: none; color: white; padding: 20px 20px; } .ChangeButton { margin: 10px 10px; float: left; } </style> </head> <body> <input type="button" id="Button1" class="ChangeButton" value="panel 1" /> <input type="button" id="Button2" class="ChangeButton" value="panel 2" /> <input type="button" id="Button3" class="ChangeButton" value="panel 3" /> <input type="button"id="Button4" class="ChangeButton" value="panel 4" /> <div id="PanelContainer" style="clear:both;"> <div class="Panel" id="Panel1">panel 1</div> <div class="Panel" id="Panel2">panel 2</div> <div class="Panel" id="Panel3">panel 3</div> <div class="Panel" id="Panel4">panel 4</div> </div> </body>
整個頁面如下：
現在我就打開了瀏覽器控制臺，把知道的知識先寫一下。首先我想到的是可視區的寬高， 這裏只寫高度clientHeight. 為了測兼容性，我還打開了兩個瀏覽器，chrome和edge, 把它們調得一模一樣，高度對齊，控制臺對齊
可能是控制臺太高，頁面出現了滾動條，也是這個無心的動作，讓我對寬度和高度有了一個全新的認識。現在在瀏覽器控制臺中寫代碼，
兩個瀏覽器表現不一致，一下子懵了，因為我記得這個是沒有兼容性問題啊，並且還發現顯示的數據也不對。在控制臺上打開element 面板，找到body, 右側顯示是181高度。
一時也不知道怎麽處理了，慣性的方法， 只能不停刷新頁面，調節控制臺的高度，重新寫代碼，突然有一次，在edge瀏覽器的控制臺報了一個warning, 請考慮添加有效的 HTML5 doctype:“<!DOCTYPE html>”。
我這時發現，我的html文檔中是沒有DOCTYPE。 其實這個warning 一直存在，只是我沒有關註它，我直接把它清空了。這也是不好的習慣， 至於為什麽沒有，我上面已經說了，現在把它加上，
刷新瀏覽器，在控制臺上重新書寫代碼，這次發現一致了。
真的是什麽問題都能碰到，一直以為<!DOCTYE html> 沒有什麽作用， 現在終於知道了它還是有用的。
Js 中一系列寬度和高度的學習