今天遇到了两个问题
第一个问题：
三个小盒子的宽度相加=父盒子宽度；但是最后一个小盒子却掉落
三个小盒子宽度200+500+100;父盒子800px
我想要的效果是这样
正好相等，为什么会掉落呢？
- 这是因为采用了content-box，内容盒模型 而内容盒模型的width不包含border和padding,而我每个小盒子都设置的有1px的border
解决方法有两种
- 第一种：把每个小盒子的border删除
- 第二种：是把父盒子的
border改成outline；outline是不占用空间，在外面
outline:1px solid red;
第二个问题是margin问题
我把四个相同大小的盒子放在一个800px的大盒子里,并于上面那个大盒子对齐
我想要的效果是这样，两边都对齐，设置了margin-right值
但是实际效果是这样，这是因为最后一个盒子还有一个margin-right值，把盒子挤下去了，盒子宽191px ,margin-right为12px，
解决方法 把父盒子的向右边扩充12px;如果直接改变父盒子的宽度，会与上面的盒子排列不整齐；所以说要使用负margin向右边扩充（没有改变大盒子的宽度）
但是此时父盒子为了居中已经使用了margin左右auto的属性了，如果在他上面使用margin会造成覆盖
办法就是再写一个盒子，包裹着四个小盒子 margin-right:-12px
