盒子模型，说白了，能够放东西的称之为小盒子，例如 div，h，li 等。像 img，input 这类不可以放东西就并不是小盒子。
盒模型：分成具体内容（content）、添充（padding）、界限（margin）、外框（border）四个部分，具体内容又可分为高(height)、宽(width)。
div 高(height)默认auto，将由子元素的改完、宽(width)
盒子模型种类
IE盒模型（border-box）
IE 盒模型：特性 width，height 包括 content、border 和 padding，是指 content padding border 。
W3C规范盒模型（content-box）
W3C 规范盒模型：特性 width ，height 只包括具体内容 content，不包括 border 和 padding 。
转换盒模型
如果你想要转换盒模型很简单，这里要改动 css3 的 box-sizing 特性。
//W3C盒子模型
box-sizing: content-box
//IE盒子模型
box-sizing: border-box
margin负数难题
margin-top原素本身会向上移动，同时还会危害下方原素会向上移动；margin-botom原素本身不容易偏移，但是也会降低本身供css载入高度，进而影响下方原素会向上移动。margin-left原素本身会往左边挪动，同时还会危害其他原素；margin-right原素本身不容易偏移，但是也会降低本身供css载入宽度，进而影响右边元素会往左边挪动；
我们首先复位好多个小盒子，随后各自给它设置一下不同类型的 margin 负数，看一下和之前的观点一不一致。
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 400px;
box-sizing: border-box;
height: 400px;
background: blue;
}
.green {
width: 200px;
height: 200px;
background: green;
}
.yellow {
width: 200px;
height: 200px;
background: yellow;
margin-bottom: -20px;
}
</style>
</head>
<body>
<div class="container">
<div class="green"></div>
<div class="yellow"></div>
</div>
</body>
margin-top
我们给墨绿色的小盒子设置一个 margin-top。
.green {
background: red;
margin-top: -20px;
}
结论如下所示，能够看见墨绿色的小盒子本身向上移动了，下方原素也会随着它一起产生偏移。
margin-bottom
我们给墨绿色的小盒子设置一个 margin-bottom。
.green {
background: red;
margin-bottom: -20px;
}
结论如下所示，能够看见墨绿色的小盒子本身并没产生偏移，可是相对高度变短了，与此同时下边红色的小盒子往上出现了挪动。
margin-left
首先我们要给原素一个波动，使其横着排序，最后我们给墨绿色的小盒子设置一个 margin-left。
.container div{
float:left
}
.green {
background: red;
margin-left: -20px;
}
结论如下所示，能够看见墨绿色的小盒子本身往左边移动了，右边红色的盒子会伴随着它一起产生偏移。
margin-right
我们给墨绿色的小盒子设置一个 margin-right。
.green {
background: red;
margin-right: -20px;
}
结论如下所示，能够看见墨绿色的小盒子本身没有出现偏移，可是总宽降低了，与此同时右边红色的小盒子往左边移动了。
不能使用上下浮动二列合理布局
理解了 margin ，既能不能使用波动完成二列规划了。
<style>
.container {
width: 400px;
padding: 10px
}
.left {
width: 100px;
height: 400px;
background-color: blue;
}
.right {
width: 300px;
height: 400px;
margin: -400px 0 0 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
结论如下所示。
