1、理解三个宽度和高度
（1）、内容的宽度和高度
就是通过width和height属性设置的宽度和高度
（2）、元素的宽度和高度宽度= 左边框 + 左内边距 + width + 右内边距 + 右边框
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
2、盒子 box-sizing属性
(1) css3中新增了一个box-sizing属性，通过设置这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变。
（2）box-sizing属性是如何保证增加padding 和 border 之后，盒子元素的宽度高度不变，就是必须减去一个部分的内容的宽度和高度。
（3）box-sizing:content-box; 默认是content-box，元素的宽高 = 边框+内边距+内容的宽高
box-sizing:border-box; 元素的宽高 = width 属性
3、父div 和子div，如何让子div在父div中水平垂直居中的问题
两种方式： 1、给父div增加padding属性
2、给子div增加margin属性
下面练习保证父盒子的元素宽高保持不变。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.big{
width: 300px;
height: 300px;
background: red;
}
.small{
width: 100px;
height: 100px;
background: blue;
}
.big1{
width: 200px;
height: 200px;
background: red;
padding-left:100px ;
padding-top: 100px;
}
.small1{
width: 100px;
height: 100px;
background: blue;
}
.big2{
width: 300px;
height: 300px;
background: red;
padding-left:100px ;
padding-top: 100px;
box-sizing: border-box;
}
.small2{
width: 100px;
height: 100px;
background: blue;
}
.big3{
width: 298px;
height: 298px;
background: red;
border: 1px solid black;
}
.small3{
width: 100px;
height: 100px;
background: blue;
/*margin-left: 100px;*/
/*margin-top: 100px;*/
margin: 100px auto;
/*注意：
1、如果两个盒子是嵌套关系，设置了里面一个盒子的顶部外边距，外面的盒子也会被顶下来，这种现象叫做外边距塌陷。
2、外面的盒子不想被一起顶下来，可以给外面的盒子添加一个边框属性。不推荐使用这种方式，推荐给父元素设置over-flow:hidden
3、在企业开发中，一般情况下如果需要控制嵌套关系盒子之前的距离，应该首先考虑padding，其次考虑margin
margin 本质上是用于兄弟之间的间隙的
*/
}
.big4{
width: 298px;
height: 298px;
background: red;
border: 1px solid black;
}
.small4{
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
/*
注意：
1、在嵌套关系的盒子中，我们可以利用margin:0 auto;方式来让里面的盒子在外面的盒子中水平居中
2、margin:0 auto; 只对水平方向有效，对垂直方向无效。
*/
}
.big5{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.small5{
width: 100px;
height: 100px;
background: blue;
margin:100px
/*
注意：
1、在嵌套关系的盒子中，我们可以利用margin:0 auto;方式来让里面的盒子在外面的盒子中水平居中
2、margin:0 auto; 只对水平方向有效，对垂直方向无效。
*/
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<br><br>
<!--方式一 修改父的内边距-->
<div class="big1">
<div class="small1"></div>
</div>
<br><br>
<!--方式二 修改父的内边距-->
<div class="big2">
<div class="small2"></div>
</div>
<br><br>
<!--方式三 修改子的外边距-->
<div class="big3">
<div class="small3"></div>
</div>
<br><br>
<!--扩展 水平居中-->
<div class="big4">
<div class="small4"></div>
</div>
<br><br>
<!--扩展 over-flow:hidden-->
<div class="big5">
<div class="small5"></div>
</div>
</body>
</html>
4、垂直方向外边距合并、塌陷
垂直方向的两个2盒子，如果都设置了垂直方向的外边距，取的是设置比较大的值。
水平方向外边距没有合并现象。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>垂直方向外边距合并</title>
<style type="text/css">
.box{
background: red;
margin-bottom: 150px;
}
.miss{
background: green;
margin-top: 200px;
}
</style>
</head>
<body>
<!--两个div之间的间距为100px-->
<div class="box">12</div>
<div class="miss">54</div>
</body>
</html>
出现情况比较多的是，嵌套关系的盒子。急需要我们去解决。
如图：
对里面的盒子进行margin-top:10px;后会出现这样状况：
可见外层div塌陷；
ok，如何解决呢？有两种方法，当然，看到有人用那里头的div进行padding空出位置，这里我们换方式，保持原代码基础上做动作。
解决方法：
1. 给大盒子（外层）指定一个边框。可以解决 （因为外层有border的话，他们两显然就不是紧贴在一起的了），如果不希望看到边框，可以改成背景色（我实验的背景色是白色）。
|
1
|
.waichen{border：
1px
solid
#fff
;}
|
2. 大盒子加溢出css：
|
1
|
overflow
:
hidden
;
|
这样的话，完美解决。
5、清空默认外边距和内边距
在默认情况下，元素有默认的外边距或者内边距，为了不影响我们开发，所以一般先默认外边距和内边距。
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
https://yuilibrary.com/yui/docs/cssreset/
6、如何还原行高，字体，和字号
用fireworks工具进行测量。
1）、在开发中，如果一个盒子存储的是文字，一般以左边的内边距为准。右边如果视觉有误差是因为撑不下一个文字了。
2）、顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。