我们学习了盒子模型之后，或许还有一些人对盒子模型里面的一些小知识点有一些忽略。
今天就带着大家一起回顾一下盒子模型中容易被混淆的知识点：
-------------------------------------分割线----------------------------------------
①在盒子模型中，内容的宽度和高度：
通过我们标签的width 和 height 设置的，就是内容的宽度和高度。
②在盒子模型中，元素的宽度和高度：
（就是能看到标签的宽度和高度）
宽度 = 左边框 + 左边的内边距 + 内容的宽度 + 右边的内边距 + 右边框。
高度 = 上边框 + 上边的内边距 + 内容的高度 + 下边的内边距 + 下边框。
③在盒子模型中，元素空间的宽度和高度：
就是元素的宽度和高度 + 左右的外边距。
-------------------------------------分割线-----------------------------------------
当我们设置一个div元素的时，增加背景色之后，显示出的大小是这个元素的大小，即上述所说的：
宽度 = 左边框 + 左边的内边距 + 内容的宽度 + 右边的内边距 + 右边框。
高度 = 上边框 + 上边的内边距 + 内容的高度 + 下边的内边距 + 下边框。
因此，当我们有时候改变border或者是padding，很有可能会导致我们整个布局会发生变形。
举个栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta chars et="UTF-8"> <title>盒子box-sizing属性</title> <style type="text/css"> .content{ width: 300px; height: 300px; background-color: red; } .aside{ float: left; width: 100px; height: 200px; background-color: green; } .article{ float: right; width: 200px; height: 200px; background-color: blue; /*border: 20px solid #000;*/ /*padding:20px;*/ } </style> </head> <body> <div class="content"> <div class="aside"></div> <div class="article"></div> </div> </body> </html> 此时是不发生变形的。
但是如果我们修改一下padding或者是border的值，这个盒子元素的宽高就会发生变化。
比如我们增加20px的padding的值，结果如图：
那么问题来了：我们如何才能保证 增加border或者增加padding后，整个元素的宽高不发生变化呢？
在CSS-3中增加了一个box-sizing的属性。这个属性就可以保证增加border或者padding之后，盒子元素的宽高不变。
box-sizing有两个取值：1.默认取值是content-box 2.border-box.
border-box就可以保证我们这个元素的宽高不会发生变化。
------------------------------------------------分割线----------------------------------------------------
注意点：
①如果两个盒子是嵌套关系，设置了里面盒子的顶部的外边距即margin-top，外面盒子也会被顶下来。
②如果外面的盒子不想被一起顶下来，可以给外面的盒子添加一个边框属性border。
③在企业开发中，一般情况下，如果要控制嵌套盒子之间的距离，应该首先要考虑padding，其次再考虑 margin，因为margin本质上是控制兄弟关系之间的间隙的。
④margin:0 auto; 可以让嵌套关系的盒子中 里面的盒子 水平居中于 外面的盒子。只对水平方向有效，对垂直方向无效。 这是固定写法，不能修改。 垂直方向上只能通过像素来进行调整。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta chars et="UTF-8"> <title>测试</title> <style type="text/css"> .content{ width: 300px; height: 300px; background-color: red; } .aside{ width: 100px; height: 100px; background-color: green; margin:0 auto; } </style> </head> <body> <div class="content"> <div class="aside"></div> </div> </body> </html>-------------------------------------------------分割线-----------------------------------------------
盒子居中和内容居中：
我们之前学过让内容进行居中的一个属性：text-align:center; ，但是在上述中，我们又学到了margin:0 auto;
那么这两个的区别在哪里呢？
margin:0 auto;的目的是让盒子自己水平居中。
text-align:center是让盒子中的内容水平居中。
其实搞清楚两个的含义也就不会混淆了。
-----------------------------------------------分割线----------------------------------------------
