CSS盒模型

可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。

盒模型分为content-box(内容盒模型)和border-box(边框盒模型)。

区别

1. content-box(内容盒模型)：

属性width,height只包含内容content，不包含border和padding。

2. border-box(边框盒模型)：

属性width,height包含content,padding和border，指的是content+padding+border。

哪个好用？

border-box(边框盒模型)，同时指定content，padding，border。

margin合并

哪些情况会合并？

1.父子嵌套的元素会合并

2.兄弟块元素会合并

怎么解决？

1.父子合并用padding/border挡住

2.父子合并用overflow：hidden挡住

3.父子合并用display：flex

4.兄弟合并用inline-block消除