## 外边距合并 两个紧靠着的都有外边距的盒子模型,采用比较大的外边距为准,小的不起作用. 遇到这种问题,只给一个盒子外边距就好了. ## 外边距塌陷 有父子两个盒子,给子盒子设置上外边距,子盒子没下来,反而导致父盒子塌陷了. 这就是外边距塌陷. 解决方法 : 1. 给父盒子加一个1px的边框. 2. 给父盒子一个1px的padding. 3. 父盒子加一个 overflow: hidden . ## 计算盒子尺寸 空间高度 = content height + padding + border + margin 空间宽度 = content width + padding + border + margin 内盒高度 = content height + padding + border*2 内盒宽度 = content width + padding + border ## padding不影响盒子盒子大小的情况 1. 盒子没有宽度,高度的情况(完全不设置). 2. 继承来自父亲的宽度和高度. ## 盒子布局稳定度 宽度(宽度剩余法) > padding > margin ## css3 盒模型 通过box-sizing来指定盒模型,即可指定content-box,border-box, 这样我们计算盒子大小的方式就发生了变化了. box-sizing : content-box 盒子大小为width + padding + border . content-box为默认值. box-sizing : border-box 盒子大小为width,就是说padding 和border是包含到width里面的.