在学习元素一系列宽度和高度之前，我们先来看一个平时开发中几乎不会遇到的问题，那就是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 中一系列宽度和高度的学习的更多相关文章

  1. JS中各种宽度、高度、位置、距离总结

    1.window.screen 浏览器与屏幕的距离,screenX(screenLeft),screenY(screenTop) 2.window.scrollTo(x,y) 将纵向滚动条移动到相对于 ...

  2. JS获取各种宽度、高度的简单介绍：

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  3. JS中各种宽度距离小结

    js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...

  4. js中的基本类型与引用类型学习

    一.基本数据类型 ECMAScript 有 5 种原始类型(primitive type),即 Undefined.Null.Boolean.Number 和 String,也称为基本数据类型,ES6 ...

  5. js中各种宽度高度总结

    offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 IE6.0.FF1.06+:offsetWidth = width + padding + borderoffsetH ...

  6. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. JS 获取各个宽度和高度

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  8. js获取窗口宽度、高度

    1.获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 2.获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen ...

  9. 20190430-screen、client、offset、scroll等JS中各种宽度距离

    参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

随机推荐

  1. HBase篇(2)-数据模型与操作

    HBase其实就是一个数据库,无非就是存储和增删改查,那我们先从数据模型说起把 这里有一张表,是用关系型数据库的思维画出来的表,这样比较易于理解: 概念 Table(表格) 没啥说的,和关系型数据库一 ...

  2. UART、SPI和I2C详解

    做单片机开发时UART,SPI和I2C都是我们最经常使用到的硬件接口,我收集了相关的具体材料对这三种接口进行了详细的解释. UART UART是一种通用串行数据总线,用于异步通信.该总线双向通信,可以 ...

  3. R语言绘制QQ图

    无论是直方图还是经验分布图,要从比较上鉴别样本是否处近似于某种类型的分布是困难的 QQ图可以帮我们鉴别样本的分布是否近似于某种类型的分布 R语言,代码如下: > qqnorm(w);qqline ...

  4. Vue之子组件

    全局组件 <script src="./static/vue.min.js"></script> // 导入vue <body> <div ...

  5. 使用ajax请求后端程序时，关于目标程序路径问题

    这里涉及到和PHP中类似的问题,有待更新!!!

  6. 牛客OI周赛8-普及组

    https://ac.nowcoder.com/acm/contest/543#question A. 代码: #include <bits/stdc++.h> using namespa ...

  7. jvisualvm中VisualGC插件提示：不受此JVM支持

    Visual GC插件「不受此JVM支持」问题 - djp567的博客 - CSDN博客https://blog.csdn.net/djp567/article/details/78662047 jv ...

  8. 微信开发 提示 Redirect_uri（错误10003）

    情景: 搭建完成一个网站,使用微信打开链接地址,结果报错1003 完整的错误信息: 出现这种情况一般有两种原因: 1.没有配置网页授权  我们可以根据微信的开发者文档http://mp.weixin. ...

  9. js判断是否是微信浏览器以及重定向

    async created () {//这个是判断是否是微信浏览器, let ua = navigator.userAgent.toLowerCase() if (ua.match(/MicroMes ...

  10. axios的增删改查。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...