元素的大小与位置属性、模态框的制作

---

一、元素节点的大小位置属性

元素节点的大小：宽度、高度；元素节点的位置：左侧、顶部。
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成

1.offsetWidth和offsetHeight

offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。
它们的大小取决于元素的宽高、padding以及边框border，有无滚动条都没有影响。

offsetWidth=width+左右padding+左右border

offsetHeight=height+上下padding+上下border

2.clientWidth和clientHeight

clientWidth和clientHeight的计算方式是一样的，只不过一个为水平方向，一个为垂直方向，clientWidth与只与元素有关

clientWidth=width+左padding+右padding-垂直滚动条宽度。

clientHeight=height+顶部padding+底部padding-水平滚动条宽度。

3.scrollWidth和scrollHeight

scrollWidth和scrollHeight这两个属性用来获取指定元素内容层的真实宽度和高度。

当不存在水平或垂直滚动条时，scrollWidth和scrollHeight等于clientWidth和clientHeight，
当盒模型具备滚动条，scrollWidth和scrollHeight可能会远远大于原尺寸。

这两个属性表示滚动条已经滚动到的位置，即可以设置滚动条的位置，也可以获取滚动条的位置。
例: 当盒模型的垂直滚动条被滚动时，实时显示滚动条当前的位置。

var boxNode=document.querySelector(".box");
boxNode.addEventListener("scroll",function(){
   console.log(this.scrollTop);
})

二、制作模态框

1.遮罩层显示

遮罩层的宽度为100%，高度为100%。
backgroundColor:rgba(0,0,0,0.5); 背景颜色设置半透明
&times 表示关闭的×

方法1：将遮罩层设置为绝对定位。（在PC端使用）
方法2：将html和body的宽度、高度都设置为100%。（在移动端使用）

2.模态框的拖拽

当鼠标在元素上触发mousedown事件且同时触发mousemove事件时，该元素可以被拖拽。

 var isDown=false;      //判断鼠标是否被按下，默认值为false表示没有按下鼠标
$(".mask .title").addEventListener("mousedown",function(){
isDown=true;
})
$(".mask .title").addEventListener("mouseup",function(){
	  isDown=false;
})
$(".mask .title").addEventListener("mousemove",function(){
if(isDown){
	console.log("按下鼠标同时移动");
}else{
	console.log("没有按下鼠标，只是移动");
}
})