代码:
1 查看box的盒子模型是什么情况?
因为box盒子设置width和height属性,然后又添加了border属性,
又因为box-sizing: border-box;该属性是保持盒子大小不变,所以是向里压缩的,
整个盒子大小(content+border+padding)还是400x400
2 查看box2盒子中的main盒子模型?
main盒子没有添加border,这个不用过多解释
3 查看box2盒子模型是个什么情况?
给box2添加border时box2盒子是420px的高度,不添加border时,和子元素main盒子一样高,是400px的高度,
此时就并不是保持盒子大小不变。。。。
所有当页面元素多的时候,注意理解,和box-sizing: border-box;的使用