朝花夕拾之---盒模型宽度的计算
难度：很简单不到一星
重要程度： 星级拉满
offsetWidth = (内容宽度 + 内边距 + 边框)， 无外边距
eg：
1.计算#div1的offsetWith是多少？
#div {
width:100px;
padding:10px;
border:1px solid #ccc;
margin:20px;
}
<div id="div1"></div>
答案是：
122
2.追问如果让offsetWidth =100，我们要怎么做？
加上怪异盒子模型即可
#div {
width:100px;
padding:10px;
border:1px solid #ccc;
margin:0;
box-sizing:border-box;
}
3.两个盒子的距离
<style>
.div1 {
width: 100px;
height: 30px;
margin: 20px 0 30px;
background: red;
}
.div2 {
width: 100px;
height: 100px;
margin: 10px 0 30px;
background: pink;
}
</style>
<div>
<div class="div1"></div>
<div class="div2"></div>
</div>
答案是：
30
解析：
上下间距重叠了，按大的间距算
4.两个盒子的距离
<style>
.div1 {
width: 10px;
height: 30px;
margin: 20px 10px 30px;
background: red;
display: inline-block;
}
.div2 {
width: 100px;
height: 100px;
margin: 10px 10px 30px;
background: pink;
display: inline-block;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
答案是：
20
解析：
左右间距正常加减
5.两个盒子的距离
<style>
.div1 {
width: 10px;
height: 30px;
margin: 20px 10px 30px;
background: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
margin: 10px 10px 30px;
background: pink;
float: left;
}
.divfa {
width: 100px;
}
</style>
<div class="divfa">
<div class="div1"></div>
<div class="div2"></div>
</div>
答案是：
40
解析：
浮动后就不会出现上下间距叠加问题，可以正常相加