两种盒模型（实际主要 box-sizing: border-box ）

• content-box 内容盒 - 内容就是盒子的边界
• border-box 边框盒 - 边框才是盒子的边界，基本就是用这个

盒模型占据的宽度

• content-box width = 内容宽度
• border-box（ 设置为边框盒时） width = 内容宽度 + padding + border

哪个好用？ border-box 好用

指定盒模型类型为边框盒时， box-sizing: border-box; 设置的宽度是指，内容宽度+padding宽度 + border宽度

指定盒模型类型为内容盒时， box-sizing: content-box; 设置的宽度是指，内容宽度

盒模型外边距会合并

父子 margin 合并，上下合并，左右不合并

兄弟 margin 合并

如何阻止合并

父子合并用 padding / border 挡住

父子合并用 overflow: hidden 挡住

父子合并用 display: flex，不知道为什么

兄弟合并是符合预期的

兄弟合并可以用 inline-block 消除