仅供学习，转载请注明出处
需求
使用HTML编写三个div，用来逐步分析拆解相关盒子模型的大小变化。
首先绘画三个div，设置大小50px，背景色为gold
<!DOCTYPE html>
<html>
<head>
<title>盒子的真实尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;}
.box03{width:50px;height: 50px;background-color: gold;}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
浏览器展示如下：
好了，从上图来看，已经绘画除了三个正方形了。下面继续看看增加一下边框border看看。
给2和3的正方形增加黑色边框，宽度为50px
border: 50px solid #000;
<!DOCTYPE html>
<html>
<head>
<title>盒子的真实尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
.box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
浏览器展示效果如下：
好了，此时已经2和3已经有了边框了。
下面来看看盒子模型的理解图：
下面继续可以给正方形3增加内边距padding，来看看效果。
给正方形3增加内边距50px
padding: 50px
<!DOCTYPE html>
<html>
<head>
<title>盒子的真实尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
.box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;padding: 50px}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
浏览器展示如下：
通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
练习
通过盒子模型的原理，制作下面的盒子：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box{
width:400px;
height: 54px;
background-color: gold;
border-top: 1px solid #f00;
border-bottom: 3px solid #666}
.box span{
font-size: 20px;
font-family: "Microsoft YaHei";
line-height: 54px;
padding-left: 150px;
}
</style>
</head>
<body>
<div class="box"><span>新闻列表</span></div><br>
</body>
</html>
浏览器展示如下：
关注微信公众号，回复【资料】、Python、PHP、JAVA、web，则可获得Python、PHP、JAVA、前端等视频资料。
