在学习元素一系列宽度和高度之前，我们先来看一个平时开发中几乎不会遇到的问题，那就是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. mysql远程连接 Host * is not allowed to connect to this MySQL server

    mysql -u root -p mysql>use mysql; mysql>update user set host =’%'where user =’root’; mysql> ...

  2. Vue2.x源码学习笔记-Vue静态方法和静态属性整理

    Vue静态方法和静态属性,其实直接在浏览器中可以查看到的,如下 圈起来的是其静态属性,但是有的属性对象中的属性的值又是函数.未圈起来的则是函数. 其实它来自如下各个目录下的js文件 // src/co ...

  3. 常用的一些markdown格式

    现在工作中,大家都习惯使用markdown写文档.按照其语法来,直接出样式,确实很方便. mac上我使用了macdown工具,只要支持markdown的差不多都一样. 自己经常习惯用的几个语法规则,记 ...

  4. c#简单的io

    读取路径判断文件是否存在,进行删除或者创建 简单的io using System; using System.Collections; using System.Collections.Generic ...

  5. jar包读取外部文件

    public static void main(String[] args) { String path1 = System.getProperty("user.home");// ...

  6. JVM深度解析

    JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java语言的 ...

  7. GitHub Or Subversion

    上一次转载了介绍GitHub的博文点我,我想对于初学GitHub的同学们还是有不清楚的地方,毕竟有些概念的理解比较费力.我觉得作为一个对于配置库技术已经有一定基础的同学们,要学习GitHub,最快以及 ...

  8. scrapy 爬取糗事百科

    安装scrapy conda install scrapy 创建scrapy项目 scrapy startproject qiubai 启动pycharm,发现新增加了qiubai这个目录 在spid ...

  9. EntityFramework Core问题处理集锦（一）

    前言 和大家脱离了一段时间,有时候总想着时间挤挤总是会有的,但是并非人愿,后面会借助周末的时间来打理博客,如有问题可以在周末私信我或者加我QQ皆可,欢迎和大家一起探讨,本节我们来讨论EF Core中的 ...

  10. 探究如何永久更改Maven的Dynamic Web Project版本及pom.xml默认配置

    一:问题 在用eclipse创建一个maven project (webApp)时,我们一般会要进行许多麻烦的配置,比如 1.更改Java jdk版本为1.7或1.8(默认1.5) 2.补全src/m ...