【前端学习笔记day22】3.6. 盒模型的实际尺寸
文章目录
3.6. 盒模型的实际尺寸
盒模型的实际尺寸
按照下面代码制作页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真实尺寸</title>
<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>
</body>
</html>
页面显示效果如下：
通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
理解练习
通过盒子模型的原理，制作下面的盒子：
