目录
box-sizing盒子模型
content-box
border-box
盒子水平方向的布局
margin-right会自动调整
margin-right设置auto或定值
magin-left设置定值
设置magin-left为auto
同时设置magin-left和magin-right为auto
同时设置width、magin-left和magin-right为auto
水平布局总结
box-sizing盒子模型
box-sizing就是用于设置div的盒子模型的。
默认为content-box，还有一个常见设置为border-box。
content-box
默认的盒子模型是什么样的呢？
盒子主要由三部分（内容区，内边距padding，边框border）组成。
在默认的盒子下我们设置的width只是内容区的部分。
我们试试，先设置一个盒子width为100px，再给它一个边框为20px，padding也为20px。
<style> #box { width: 100px; height: 100px; padding: 20px; border: 20px lightblue solid; background-color: aqua; } </style> <body> <div id="box"></div> </body>
我们可以鼠标选中发现整个盒子我们只是设置了内容区width为100px。
整个盒子实际上占据了水平方向上的180px。获取这个宽度的方式是offsetWidth，这才是真正盒子的可视宽度。
我们想要真正宽100px的盒子，可能得设置width为20px。
<style> #box { width: 20px; height: 20px; padding: 20px; border: 20px lightblue solid; background-color: aqua; } </style>
border-box
我们意识到每次得去计算width的值过于麻烦了，我们就不能直接让盒子固定为100px吗。
border-box就可以将width作为盒子真正占据宽度，内容区将会帮我们自动计算。
<style> #box { width: 100px; height: 100px; padding: 20px; border: 20px lightblue solid; background-color: aqua; box-sizing: border-box; } </style>
我们设置的width为100px，此时指的就不是内容区了，指的应该是内容区+padding+border，而这个值此时与offsetWidth相等。
它会自动调整内容区的宽，达到内容区与padding和border相加后为100px。
要注意计算出来的内容区最小为0，也就是这个盒子会被padding和border限制了大小，就算将width设置为50px，盒子最小也会占据80px
盒子水平方向的布局
学会盒子模型了，对于内容区、padding、border的控制，想必你已经可以拿捏了，但是一个盒子布局时，还存在一个属性会对它的布局产生影响，就是margin。
我们拿盒子水平方向的布局说，水平方向上，它的占据宽度如下。
margin-left+border-left+padding-left+内容区（默认盒子模型就是width）+padding-right+border-right+margin-right = 父元素的内容区宽度
<style> #outer { width: 500px; height: 100px; background-color: red; } #box { width: 100px; height: 100px; background-color: aqua; } </style> <body> <div id="outer"> <div id="box"></div> </div> </body>
如果我们不设置width，width的默认值是auto，所以0+0+0+auto+0+0+0=500，width会自动调整成500，占据整个父级的内容区宽度。
但是我们这里设置了width为定值100px，0+0+0+100+0+0+0=500，我们可以看到等式不成立，咋整？
margin-right会自动调整
等式不成立，浏览器会自动调整margin-right的值为400使等式成立。
这也正是块级元素即便设置了width没有达到父级内容区宽度仍然占据一行的原因。
虽然计算样式上没有标出来，但是dom上的颜色区域会告诉你占据了400px。
margin-right设置auto或定值
我们可以将margin-right设置为auto，会发现效果是一样的，只不过是把值标出来在计算样式上，给你了。
实际中，如果width固定了，margin-right虽然没有设置auto仍然会自动调整，此时我们可以将默认的margin-right看作auto，这样方便理解，注意只能看作，除非你真的设置了auto
就算将它设置为定值，它也会被调整。
可以看到我设置margin-right为20px，计算样式显示20px，可是在dom上显示的区域仍然是400。
magin-left设置定值
如果我们设置margin-left为定值20px，同样还是会去调整margin-right使等式成立。
设置magin-left为auto
终于，当我们设置magin-left为auto之后，调整的活给了magin-left。
因为magin-right只是没人干调整的活的时候才出手的，它默认值是0并不是auto。
当设置magin-left为auto，等式成为auto+0+0+100+0+0+0=500.
同时设置magin-left和magin-right为auto
这时，两个人同时调整，活就被平摊了，一边调整一半，会发现居中了！
这也就是为啥 margin: 0 auto 可以设置水平居中的原因。
同时设置width、magin-left和magin-right为auto
width的优先级还是高一些，如果设置了，就会自动magin-left和magin-right的auto就自动忽略不计，全都为0，width会自动调整占满内容区。
注意，以上都是在padding、border为0的基础上，如果padding、border有值的话注意在等式中的计算要考虑它们。
水平布局总结
margin-left+border-left+padding-left+内容区（默认盒子模型就是width）+padding-right+border-right+margin-right = 父元素的内容区宽度。
width设置auto的话会调整width使等式成立。
如果没有任何一个值为auto，则自动调整margin-right使等式成立。
margin-left也可以设置auto被作为等式成立的调整依据。
同时设置magin-left和magin-right为auto，会一边占据一半的调整宽度。
同时设置width、magin-left和magin-right为auto，magin-left和magin-right将变为0，只有width被作为等式成立的调整依据。
