1. box-sizing:
2. 三大家族:scroll 、offset、client
详细网站:https://blog.csdn.net/wzios/article/details/68059818
offset家族
1.1 三大家族和一个事件对象
三大家族(offset/scroll/client)
事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制)
1.2 Offset家族简介
offset这个单词本身是--偏移,补偿,位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族;
offsetWidth和offsetHight以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
1.2.1 offsetWidth和offsetHight (检测盒子自身宽高+padding+border)
这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding+border;
offsetWidth =width+padding+border;
offsetHeight =Height+padding+border;
1.2.2 offsetLeft和offsetTop (检测距离父盒子有定位的左/上面的距离)
返回距离上级盒子(带有定位)左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
1.2.3 offsetParent (检测父系盒子中带有定位的父盒子节点)
1、返回改对象的父级 (带有定位)
如果当前元素的父级元素没有进行CSS定位 (position为absolute或 relative,fixed), offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 (position为absolute或 relative,fixed), offsetParent取最近的那个父级元素。
1.3 offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而 style.left不可以
二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
style.left在=的左边和右边还不一样。(左边的时候是属性,右边的时候是值)
Scroll家族组成
ScrollWidth和scrollHeight(不包括border)
检测盒子的宽高。(调用者:节点元素。属性。)
盒子内容的宽高。(如果有内容超出了,显示内容的高度)
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
scrollLeft和scrollTop
网页,被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
兼容性问题
一、未声明 DTD(谷歌只认识他)
document.body.scrollTop
二、已经声明DTD(IE678只认识他)
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
事件event
1.1 事件对象的获取(event的获取)
IE678中,window.event
在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
1.2 兼容获取方式有两种:
不写参数直接使用event;
写参数,但是为event....var event = event || window.event;(主要用这种)
1.3 event内容重要内容
PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)
ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)
ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)
1.1 PageY和pageX的兼容写法(很重要)
在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
client家族
1.1 主要成员
1、clientWidth 获取网页可视区域宽度(两种用法)
clientHeight 获取网页可视区域高度(两种用法)
调用者不同,意义不同:
盒子调用: 指盒子本身。
body/html调用: 可视区域大小。
2、clientX 鼠标距离可视区域左侧距离(event调用)
clientY 鼠标距离可视区域上侧距离(event调用)
3、clientTop/clientLeft 盒子的border宽高
1.2 三大家族区别(三大家族总结)
1.2.1 Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)width + padding
scrollHeight = 内容高度(不包含border)
1.2.2 top和left
offsetTop/offsetLeft:
调用者:任意元素。(盒子为主)
嘛作用:距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
调用者:document.body.scrollTop/.....(window)
嘛作用:浏览器无法显示的部分(被卷去的部分)。
clientY/clientX:(clientTop/clientLeft 值的是border)
调用者:event.clientX(event)
嘛作用:鼠标距离浏览器可视区域的距离(左、上)。
// width和height
// offset带border
// scroll不带border,内容的宽高
// client不带border
// top和left
// offset距离父系盒子带有定位的盒子之间的距离
// scroll被卷去的部分的距离
// clientborder的宽高
//clientX和clientY
// event调用,鼠标距离浏览器的可视区域的距离
1.3 client家族特殊用法之:检浏览器宽/高度(可视区域)
1.4 Onresize事件
只要浏览器的大小改变,哪怕1像素,都会触动这个事件。
1.5 案例:根据浏览器可视区域大小,给定背景色
1.6 事件总结
区分:
1.window.onscroll 屏幕滑动
2.window.onresize 浏览器大小变化
3.window.onload 页面加载完毕
4.div.onmousemove 鼠标在盒子上移动
(注意:不是盒子移动!!!)
5.onmouseup/onmousedown == onclick
1.7 获得屏幕宽高
window.screen.width
分辨率是屏幕图像的精密度,指显示器所能显示的像素有多少。
我们的电脑一般:
横向1280个像素点,
纵向960个像素点。
我们看电影的时候是满屏和半屏的,就是这。