盒模型
**下面本文章将会从以下几个方面谈谈盒模型。
-
基本概念：标准模型 和IE模型
-
CSS如何设置这两种模型
-
JS如何设置获取盒模型对应的宽和高
-
实例题（根据盒模型解释边距重叠）
-
BFC（边距重叠解决方案）
**
盒模型的组成由里向外content,padding,border,margin.
盒模型是有两种标准的，一个是标准模型，一个是IE模型。
css如何设置两种模型
这里用到了CSS3 的属性 box-sizing
/* 标准模型 */
box-sizing:content-box;
/IE模型/
box-sizing:border-box;
标准盒子模型：
IE盒子模型：
JS获取宽高
通过JS获取盒模型对应的宽和高，有以下几种方法：
为了方便书写，以下用dom来表示获取的HTML的节点。
- dom.style.width/height (支持读写)
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
- dom.currentStyle.width/height （仅支持读）
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。
但这种方式只有IE浏览器支持。
- window.getComputedStyle(dom).width/height（仅支持读）
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
- dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的
width=content宽高+padding+border:
getBoundingClientRect()的width和height都是以页面实际渲染的尺寸进行计算的，缩小渲染的尺寸相应也会缩小（近似等于100px，居然有误差！！），不管CSS的width或height属性是什么， - dom.offsetWidth/offsetHeight
width=content宽高+padding+border:
但offsetWidth和offsetHeight却是始终以CSS属性返回元素的尺寸（都是200px），不管缩不缩放（真是冥顽不化.jpg）。
在有滚动条的情况下clientWidth和clientHeight不包含滚动条，换句话说就是在有滚动条的情况下只包含滚动条内部的可视部分
scroll 和 client 和 offset
client
clientWidth：获取网页可视区域的宽度(两种用法) (width+padding)
clientHeight： 获取网页可视区域的高度(两种用法)
clientX： 鼠标距离可视区域左侧的距离(event调用)
clientY：鼠标距离可视区域上侧的距离(event调用)
clientTop：盒子的上border (对于body元素则为0)
clientLeft：盒子的左border (对于body元素则为0)
offset
offsetWidth：元素自身的宽度(含border) (width+padding+border)
offsetHeight：元素自身的高度(含border)
offsetLeft：距离父盒子中带有定位的左侧距离（不包括边框）
offsetTop：距离父盒子中带有定位的顶部距离
offsetParent：当前元素的父级参照物
scroll
scrollWidth：内容没有溢出：元素自身的宽度 (width+padding)
内容溢出： autoWidth + padding-left
scrollHeight：内容没有溢出：元素自身的高度
内容溢出： autoHeight + padding-top
scrolltLeft：被卷去的左侧的宽度
scrollTop：被卷曲的顶部的宽度
screen
window.screenTop/screenLeft (窗口相当于屏幕的X和Y坐标)
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
获取元素
通过ID名字获取元素 document.getElementById(“box”);
通过ClassName获取元素 document.getElementsByClassName(“ClassName”)
通过 Name 获取元素 document.getElementsByName(“Name”) 一般用于表单元素
通过标签名字获取元素 document.getElementsByTagName(“TagName”)
document.querySelector() 选择一个
document.querySelectorAll() 选择多个
相关理解代码：
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比较</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
1500px;
height:2000px;
border: 4px solid;
padding: 20px;
}
div{
border: 1px solid;
left: 50px;
position: relative;
padding: 10px;
top: 50px;
100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
var div1 = document.getElementById("div1");
// console.log(div1.clientWidth);
// console.log(div1.clientHeight);
div1.onclick=function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+","+oEvent.clientY);
}
// console.log(div1.clientTop);
// console.log(div1.clientLeft);
// console.log(document.body.clientTop);
// console.log(document.body.clientLeft);
// console.log(document.body.clientWidth);
// console.log(document.body.clientHeight);
// console.log(div1.offsetWidth);
// console.log(div1.offsetHeight);
// console.log(div1.offsetTop);
// console.log(div1.offsetLeft);
// console.log(document.body.offsetWidth);
// console.log(document.body.offsetHeight);
// console.log(document.body.offsetTop);
// console.log(document.body.offsetLeft);
console.log(document.body.scrollWidth);
console.log(document.body.scrollHeight);
// console.log(document.body.scrollTop);
// console.log(document.body.scrollLeft);
console.log(window.screenTop);
console.log(window.screenLeft);
console.log(window.screen.height);
console.log(window.screen.width);
console.log(div1.getBoundingClientRect().width);
</script>
</html>
注意：
- dom.style.width/height (支持读写)只能取到dom元素内联样式所设置的宽高
- dom.currentStyle.width/height （仅支持读）在页面渲染完成后,只有IE浏览器支持
- window.getComputedStyle(dom).width/height（仅支持读）可以兼容更多的浏览器
- dom.getBoundingClientRect().width/height 根据元素在视窗中的绝对位置来获取宽高 width=content宽高+padding+border: 缩小渲染的尺寸相应也会缩小
- dom.offsetWidth/offsetHeight
width=content宽高+padding+border:却是始终以CSS属性返回元素的尺寸（都是200px）
6.clientWidth 在有滚动条的情况下clientWidth和clientHeight不包含滚动条，换句话说就是在有滚动条的情况下只包含滚动条内部的可视部分
总结：
1.标准/IE盒模型以及设置
2.js获取元素
3.js设置以及获取盒模型对应的宽高
4.scroll 和 client 和 offset三大家族
5.screen