一、首先概念：盒子模型的寬高
1.內容的寬度和高度:width height
2.元素的寬高:
寬：左邊邊框+左邊內邊距+width+右邊內邊距+右邊邊框
高：上邊邊框+上邊內邊距+height+下邊內邊距+下邊邊框
3.元素空間的寬高：
寬：左邊外邊距+左邊邊框+左邊內邊距+width+右邊內邊距+右邊邊框+右邊外邊距
高：上邊外邊距+上邊邊框+上邊內邊距+height+下邊內邊距+下邊邊框+下邊外邊距
4.box-sizing：border-box；保證加border和padding后元素寬高不變
5.清空默認邊距
*{margin:0;padding:0;}
二、使小盒子在大盒子中居中的方法（嵌套關系）
1.可以設置大盒子的內邊距，使得小盒子被擠到中間
2，設置小盒子的內邊距，使得小盒子在中間（注意，此方法需要設置大盒子的邊框，否則無法居中）
3.設置盒子居中方法 margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
/*div{ display:inline-block;}*/
.box1{
/* margin-left: 568px;*/
margin: 0 auto;
box-sizing: border-box;
width: 200px;
height: 200px;
background: aquamarine;
padding: 50px;
border:5px solid blanchedalmond;
}
.box2{
box-sizing: border-box;
width: 100px;
height: 100px;
background: bisque;
color: red;
line-height: 100px;
text-align: center;
border: 2px solid black;
}
.box3{
margin: 0 auto;
box-sizing: border-box;
width: 200px;
height: 200px;
background:brown;
border-top:5px solid black;
}
.box4{
width: 100px;
height: 100px;
background: cadetblue;
color: red;
line-height: 100px;
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div class="box1"><div class="box2">方法1</div></div>
<div class="box3"><div class="box4">方法2</div></div>
</body>
</html>
