在学习元素一系列宽度和高度之前，我们先来看一个平时开发中几乎不会遇到的问题，那就是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. AI R-CNN目标检测算法

    Region-CNN,简称R-CNN,是首次将深度学习应用于目标检测的算法. bounding box IOU 非极大值抑制 selective search 参考链接: https://blog.c ...

  2. Linux内存管理 一个进程究竟占用多少空间？-VSS/RSS/PSS/USS

    关键词:VSS.RSS.PSS.USS._mapcount.pte_present.mem_size_stats. 在Linux里面,一个进程占用的内存有不同种说法,可以是VSS/RSS/PSS/US ...

  3. Nginx（一）------简介与安装

    说到 Nginx ,可能大家最先想到的就是其负载均衡以及反向代理的功能.没错,这也是当前使用 Nginx 最频繁的两个功能,但是 Nginx 可不仅仅只有这两个功能,其作用还是挺大的,本系列博客就来慢 ...

  4. Spring Cloud 入门教程(八)： 断路器指标数据监控Hystrix Dashboard 和 Turbine

    1. Hystrix Dashboard (断路器:hystrix 仪表盘)  Hystrix一个很重要的功能是,可以通过HystrixCommand收集相关数据指标. Hystrix Dashboa ...

  5. 图解Redis之数据结构篇——简单动态字符串SDS

    图解Redis之数据结构篇--简单动态字符串SDS 前言     相信用过Redis的人都知道,Redis提供了一个逻辑上的对象系统构建了一个键值对数据库以供客户端用户使用.这个对象系统包括字符串对象 ...

  6. .net core实践系列之短信服务-目录

    前言 经过两周多的业余时间,终于把该系列的文章写完了.第一次写系列,可能部分关键点并没有覆盖到,如果有疑问的朋友可以随时反馈给我.另外也感谢在我发布文章时给予我方案建议与反馈源码BUG的朋友们.下面是 ...

  7. Wechart 饼图

    预览 Preview | Usage Source | Pie Source | Tutorial Wechart by Cax Cax 众所周知 Cax 既能开发游戏.又能开发图表.本文将从饼图开始 ...

  8. 多路选择器实现总线结构——Verilog

    ////////////////////////////////////////////////////////////////////////////////// //该程序完成通过多路选择器MUX ...

  9. Misha, Grisha and Underground CodeForces - 832D （倍增树上求LCA）

    Misha and Grisha are funny boys, so they like to use new underground. The underground has n stations ...

  10. Django的模板语言

      Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. ...