练习题
制作一个500*500px的红色大盒子，中间有个200*200px的小盒子，小盒子是水平垂直居中在大盒子中的。
方法1：
原理：在大盒子中设置内边距的值为150px，相应的在height和width的值上减去两倍的150，也就是300。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.all{
height: 200px;
width: 200px;
background-color: red;
padding: 150px;
}
.content{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="all"><div class="content"></div></div>
</body>
</html>
方法2：
原理：在大盒子中设置box-sizing: border-box;来限制盒子。这时就不用修改w/h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.all{
box-sizing: border-box;
height: 500px;
width: 500px;
background-color: red;
padding: 150px;
}
.content{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="all"><div class="content"></div></div>
</body>
</html>
方法3：
原理：给小盒子设置外边距margin属性，此时注意，如果直接添加margin=150px，则会出现下面的情况
那怎么才能避免这种问题，方法是：给大盒子加border边框属性，即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.all{
border: 1px solid ;
height: 500px;
width: 500px;
background-color: red;
}
.content{
width: 200px;
height: 200px;
background-color: green;
margin: 150px;
}
</style>
</head>
<body>
<div class="all"><div class="content"></div></div>
</body>
</html>
注意点：
在企业开发中处理盒子嵌套，应当首先考虑padding，其次考虑margin，margin本质上是用于控制兄弟关系之间的间隙的