6.4 盒子的显示区域与占据区域
盒子的显示区域指看到的元素的位置与大小，即通过开发者工具查看盒子的页面显示。
示例1：div没有设置宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
margin: 0;
}
.div1 {
/* width: 220px; */
height: 30px;
padding: 20px;
border: 5px solid #0aaa76;
}
</style>
</head>
<body>
<div class="div1">div1 小步教程 xiaobuteach.com</div>
<span class="span1">span1 小步教程 xiaobuteach.com</span>
</body>
</html>
开发者工具查看盒子的页面显示。div1盒子的显示区域是一整行。
当前场景下， 盒子的显示区域与占据区域一致。
2、盒子的占据区域
当前元素的占据区域（位置与大小）决定后续元素的位置，简称占位。上述示例，dv1的占据区域与显示区域完全相同。盒子的占据区域与显示区域有时并不相同。
示例2：div设置宽度时，显示区域与占据区域不同。上述代码添加width属性（取消相应注释），运行效果如下。
div1的显示区域是上图绿色标记区域，并没有显示整行。下方span1仍然换行，说明div1占据区域是整行。此时，显示区域与占据区域并不相同。一个元素的占据区域不能通过它的显示位置分析，需结合它周围元素位置共同分析推算。
示例3： span设置盒子属性时，显示区域与占据区域不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
.span1 {
background-color: #eee;
}
.span1-1 {
color: #0aaa76;
}
.span1-2 {
padding: 5px;
border: 5px solid #7030a0;
background-color: #ddd;
color: #4aa6fc;
}
.span1-3 {
color: #ed7d31;
}
</style>
</head>
<body>
<div class="div1">div1 小步教程 xiaobuteach.com</div>
<div class="div2">
<span class="span1-1">元素1</span>
<span class="span1-2">元素2</span>
<span class="span1-3">元素3</span>
</div>
<div class="div3">div3 小步教程</div>
</body>
</html>
运行效果
“元素2”不太正常，显示区域较大，但div2与div3的位置并没有随着它的显示区域相应下移。“元素2”占据区域很小，与没有设置padding与border时一致，而显示区域较大，所以造成与上下元素的重叠。这个分析过程即：通过div1、元素1~3、div3共同分析推算元素2的占位。
实际项目中，占据区域与显示区域不同的情况经常发生，不属于错误，根据页面需求合理运用。
