代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box3{
width: 200px;
height: 200px;
background-color: blue;
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4">
</div>
</div>
</body>
</html>标准盒模型尺寸的计算 盒子模型的实际宽度:width 左右padding 左右border 盒子模型的实际长度:width 上下padding 上下border
border以内的盒子区域 统称为盒子的可视区域
width height设定的区域,称为内容区域content,我们写在一对标签中的 内容只能出现在width和height设置的区域 padding margin 两个属性主要用来改变内容的位置关系 和 盒子的位置关系
