在学习元素一系列宽度和高度之前，我们先来看一个平时开发中几乎不会遇到的问题，那就是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. vue 中给组建绑定原生事件@click.native=""

    <template>     <div class="div">  //组建使用          <v-header @click.native=& ...

  2. [SHOI2006]color 有色图[群论、组合计数]

    题意 用 \(m\) 种颜色,给 \(n\) 个点的无向完全图的 \(\frac{n(n-1)}{2}\) 条边染色,两种方案相同当且仅当一种方案交换一些点的编号后可以变成另一种方案.问有多少本质不同 ...

  3. 性能调优3：硬盘IO性能

    数据库系统严重依赖服务器的资源:CPU,内存和硬盘IO,通常情况下,内存是数据的读写性能最高的存储介质,但是,内存的价格昂贵,这使得系统能够配置的内存容量受到限制,不能大规模用于数据存储:并且内存是易 ...

  4. 追源索骥：透过源码看懂Flink核心框架的执行流程

    li,ol.inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-bottom:20px}dt, ...

  5. Python-SMTP发送邮件(HTML、图片、附件)

    前言: SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. 一.Python发送HTML ...

  6. H5 59-浮动元素的脱标

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

  7. R语言

    什么是R语言编程? R语言是一种用于统计分析和为此目的创建图形的编程语言.不是数据类型,它具有用于计算的数据对象.它用于数据挖掘,回归分析,概率估计等领域,使用其中可用的许多软件包. R语言中的不同数 ...

  8. 分布式ID生成系统 UUID与雪花（snowflake）算法

    Leaf——美团点评分布式ID生成系统 -https://tech.meituan.com/MT_Leaf.html 网游服务器中的GUID(唯一标识码)实现-基于snowflake算法-云栖社区-阿 ...

  9. MYSQL: 1292 - Truncated incorrect DOUBLE value: '184B3C0A-C411-47F7-BE45-CE7C0818F420'

    MySQL Bugs: #63112: Truncated incorrect DOUBLE valuehttps://bugs.mysql.com/bug.php?id=63112 Error Co ...

  10. md5加密通过URL传给后台

    首先要把你要用的md5库引入 这个技术其实挺简单的,咋们直接贴上代码(这个是项目上的) sign = hex_md5("type="+type&"userId=& ...