盒子模型的各种高度记录

height：返回元素内容的高度。（根据是不是怪异盒子模型计算高度）
offsetheight：它返回的高度是内容高+padding+边框。
clientHeight：在页面上返回内容的可视高度（不包括边框，外边距或滚动条）。
scrollHeight：返回整个元素的高度，即不设置高度时的，content高度+padding高度。其实就是展开后的clientHeight

这个content设置100px，但是显示83，因为还有滚动条，滚动条宽度17px。
offsetheight：130 = 内容高100+padding20+边框10。
clientHeight：103 = 内容的可视高度83（即100px-滚动条17px）+ padding20。
scrollHeight：167 =147（内容真实高度）+padding20 = 167。

搞懂scroll （参考链接）

scroll相关属性，其实它描述的是outer的属性：

#outer {
   margin: 100px 50px;
   height: 100px;
   width: 50px;
   padding: 10px 50px;
   overflow: scroll;
}

//慢慢滚动到底部的实现
function toBottom(ele) {
       if (ele.scrollTop < ele.scrollHeight - ele.clientHeight) {
           setTimeout(function(){
                   ele.scrollTop++;
                   toBottom(ele);
               },100);
       }
}

比如这段代码，inner中间是长list列表，outer是容器，overflow设置为auto或者scroll。
通常觉得滚动是inner长list在往上移动，但是这是错误的，是outer的scrollTop的值在变化。要考虑的是outer的属性。

//判定元素是否滚动到底：
element.scrollHeight - element.scrollTop === element.clientHeight

//返回顶部
element.scrollTop = 0

浏览器尺寸
window.innerHeight：浏览器窗口的可见高度。包括了滚动条但是不包括border（该窗口的可见高度，如果下面打开开发者模式，这个高度缩小）
window.outHeight：计算整个浏览器的高度，包括标签页等等的整个浏览器高度，只有改变整个浏览器的高度才会变。
这两个值是根据浏览器页面大小而变化的。
浏览器窗口的尺寸(就是内容部分，可以看见的部分，不包括工具栏和滚动条)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

兼容所有浏览器：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

盒子模型的各种高度记录相关推荐

三、CSS重要的盒子模型知识总结（中篇）
@Author:Runsen CSS知识总结(上) 继续上篇文章,总结css 今天一篇全讲重要的盒子模型文章目录边框属性什么边框? 边框属性的格式连写(分别设置四条边的边框) 内边距什么是内 ...
Web前端开发笔记——第三章 CSS语言第五节盒子模型
目录一.CSS布局与定位二.盒子模型三.盒子模型的组成四.设置边框的属性五.设置外.内边距的属性六.overflow 属性结语一.CSS布局与定位在CSS中对一个网页进行布局与定位, ...
【重识 HTML + CSS】盒子模型相关知识点
盒子模型盒子模型 (Box Model) 宽度.高度相关 CSS 属性 - width.height 内边距相关 CSS 属性 - padding 外边距相关 CSS 属性 - margin [常见 ...
自学前端第十天 : CSS怪异盒子模型
一.怪异盒子模型怪异盒模型是IE盒子模型我们可以通过 css 样式 box-sizing来进行切换 select {box-sizing: border-box; /* 怪异盒子模型 */box- ...
html盒子宽高,css盒子模型之宽度和高度
盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) HTML代码 *lt;div class="pag1">*lt;/div ...
html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色盒子可见大小由内容区,内边距和边框共同决定为元素设置边框,必须指定3个样式 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
（九）HTML5+CSS3新特性：语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡
本文仅用作学习记录,学习视频为B站的pink老师文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...

盒子模型的各种高度记录

盒子模型的各种高度记录相关推荐

最新文章

热门文章