1.盒模型和怪异盒模型
标准盒模型
一、标准盒模型类比
当我们在学习H5前端的时候，首先应该了解的是盒模型的结构，这样在写页面的时候才不会结构不清除，导致属性设置起来不明白，只是试出来，却不懂底层的原理。
首先可以先在html中写个div，然后给div加上width，height ，background；设置好之后在谷歌浏览器运行打开。
会看到如下的界面：
这个里面就会出现后下角这个div的盒子模型。万物皆盒子，每个标签可以看成一个盒子。每个标签写在html里面，然后都可以通过浏览器的这里去看它的盒子模型，有的是有margin的，有的没有。
盒模型就是包含：margin、padding、border、内容区域
理解盒模型：
我们将盒子比喻成一个家，家里有院子和一个房子。
内容区域：(就是你家里的这个房子)，设置width、height的区域，内容只能写在设置宽高的区域里面。
padding:(就是你家的院子，即就是你家的房子离你家的外墙的距离)border和内容区域的距离，称为内边距。
border: (就是你家的围墙) ，称为边框。
margin: (就是你家的围墙和别人家的围墙的距离)，称为外边距。
二、padding
由于布局的时候是从左到右，从上到下。所以padding就是将内容向下或者向右挤。
随着内容的向右或向下，盒子的边界也会相应的移动。（这就相当于你家的里面的房子不变，但是院子变大了，那围墙就得相应的变大）。
我们可以利用padding来让内容远离自己的盒子边界，从而实现两个盒子内容之间的距离的变化。
都是顺时针的方向写值。
三、margin
margin可以改变盒子与盒子之间的距离。
margin布局也遵循从上到下，从左到右的原则。
margin-top:会将自身盒子向下推
margin-left:会将自身盒子向右推，
margin-right:会与将盒子同行排列的同级元素向右推。
margin-bottom:会将相邻的同级元素向下推。
嵌套结构下：子级通过margin来改变子级在父级中的位置，margin-left指的是子级左边框到父级内容区域左边界的距离。
其他方向也是子级边框到父级内容区域边界之间的距离
四、嵌套结构下当父级没有明确的上边界时
嵌套结构下，当父级没有明确的上边界时(border，padding)，这时候子级设置margin-top的话，就会传递给父级，带着父级一起向下移动。
解决方法：给父级加上边界。
五、同级块在设置margin的时候，各个块的margin会不会叠加的问题。
六、怪异盒模型与标准盒模型对比
盒子在设置了box-sizing:border-box;后，盒子就成普通盒模型变成了怪异盒模型了。
怪异盒模型在设置width和height后，再去设置把border、padding都是将内容区域变小，不会影响盒子的整体大小，盒子的整体大小还是前面设置的width和height。