前言
这几天接触获取元素位置的信息比较多,感觉有点混淆了,感觉位置有好多种的获取方式,而且每一种的获取方式的使用范围和作用范围都是有一点区别的,为了能够区分的好一点,于是做一个小小的总结,能够有所收获。
盒子模型
此模型在使用CSS进行网页布局的时候会用到的一个模型。里面装有HTML元素的一些内容。一个盒子由外到内分别由四部分组成:margin(页边距),border(边框),padding(内边距)和content(内容)。通过组成可以很形象的看出,margin,border和padding是CSS的属性,我们在设计中通过设置这三个属性来控制盒子的三个部分,然而content就是盒子内部的东西,也就Html元素的内容。
看图和文字很难理解的,实例解析:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#dv {
/*position:absolute;*/
width: 200px;
height: 200px;
/*边框*/
border-bottom: 50px solid blue;
border-left: 50px solid green;
border-top: 50px solid black;
border-right: 50px solid yellow;
/*页边距*/
margin-bottom: 20px;
margin-left: 30px;
margin-top: 40px;
margin-right: 50px;
/*内边距*/
padding-bottom: 20px;
padding-left: 30px;
padding-top: 40px;
padding-right: 50px;
}
</style>
</head>
<body>
<div id="dv">中国加油!!<br />中国万岁!!<br />中国万岁!!<br />中国万岁!! </div>
</body>
</html>
以上代码的运行结果如下:(为了方便验证,推荐大家一款测量像素软件:)
(软件)参考链接:https://blog.csdn.net/u011718737/article/details/52231860/
获取元素位置
这个就有点头疼了,涉及到元素的位置有很多,还是得多实践才能掌握出真知啊。
关于窗口的一些位置信息的获取
1、可视区域的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
2、页面的实际大小
document.documentElement.scrollWidth
document.documentElement.scrollHeight
3、窗口左上角 与 屏幕左上角的 距离
window.screenX、
window.screenY
4、屏幕宽高
window.screen.width
window.screen.height
5、屏幕可用宽高(去除任务栏)
window.screen.availWidth
window.screen.availHeight
6、窗口的外高度、外宽度
window.outerWidth
window.outerHeiht
7、窗口的内高度、内宽度(文档显示区域+滚动条)
window.innerWidth
window.innerHeight