盒模型有两种

• content-box（标准盒模型）：内容就是盒子的边界
• border-box（怪异盒模型）：边框才是盒子的边界

1、 宽度

• content-box（标准盒模型）： width=内容宽度

• border-box（怪异盒模型）：width=内容宽度+padding+border

• 总结： border-box（怪异盒模型）更好用
• 可以同时指定padding.width.border

2、margin合并

• 那些情况会合并

1. 子与子之间margin会合并

2. 子的第一个和最后一个会和父的margin合并（上下会重叠左右不会，且以长的为主）

3、如何阻止合并

• 子与子之间可以用（display: inline-block;）消除

• 父与子之间用下面三种消除

1. padding/border挡住
2. overflow: hidden 挡住
3. display: flex 阻止