先创建一个 宽高 为 400 的大盒子，里面有两个宽高为200的小盒子，各自左右浮动 刚刚好把父盒子宽度占满
<style> .box{ width: 400px; height: 400px; border: 1px solid red; margin: 200px auto; } .box1{ width: 200px; height: 200px; background-color: rebeccapurple; float: left; } .box2{ width: 200px; height: 200px; background-color: pink; float: right; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body>然后给两个子盒子 添加边框
border: 2px solid red;那么这时候两个子盒子宽度都为204 显然大于父盒子宽度所以一个就被挤下去 这个时候加上
box-sizing: border-box;神奇！！！，具体还不知道怎么总结，但是算有点突破，反正好像加上之后border不算入子盒子宽高
content-box 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适 用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 border-box 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 指定 box-sizing 属性的值，应该从父元素继承
