Js 中一系列宽度和高度的学习

　　在学习元素一系列宽度和高度之前，我们先来看一个平时开发中几乎不会遇到的问题，那就是html文档声明<!DOCTYPE html> 确实会对元素的宽高产生影响。几乎不会遇到，是因为我们在写html 文件时，编辑器会自动帮助我们生成html文件的模版。在vs code中, 按 !，再加enter或tab 键，就生成了，非常简单方便。而它最开始的一行就是<!DOCTYPE html>

Js 中一系列宽度和高度的学习

　　而我在这里却遇到了没有写文档声明的html 文件，是因为我在学习h5 的history api 实现路由时，突然想到要学习width 和height 知识的，也不是完全突然，因为这两个知识点是在同步学习的。在学习时history api 时，我新建了一个空html文件，直接把别的人代码复制过来了，而代码中确实没有文档声明，这是以后在查找问题是发现的。

Js 中一系列宽度和高度的学习

　　这个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>