CSS基本概念（盒模型）

CSS盒模型分2种

content-box    内容盒，盒内容就是盒子的边界
border-box     边框盒，边框才是盒子的边界

盒模型宽度只包含内容，就是内容盒模型content-nox，宽度包含边框，就是边框盒border-box

盒模型公式：

content-box width=内容宽度
border-box width=内容宽度+padding+border

哪种盒模型好用:

border-box好用，因为同时指定了content(内容)，padding(内边距)，border(边框)

盒模型图解：

CSS盒模型的margin会合并：

2个margin中间没有东西的话margin会合并，例如没人border

哪些情况可以合并（只有上下margin会合并）
父子 margin 合并
兄弟 margin 合并

如何阻止margin合并：

如何阻止合并
父子合并用 padding/border 挡住
父子合并用 overflow:hidden 挡住
父子合并用 display:flex 挡住
兄弟合并是符合预期的
兄弟合并可以用 inline-block消除

使用CSS练习制作了一个彩虹：点击预览

详细资料点击：CSS层叠样式表