一、两种盒模型

1.conten-box内容盒-内容就是盒子的边界

公式：content-box width=内容宽度

2.border-box边框盒-框架才是盒子的边界

公式：border-box width=内容宽度+padding+border

border-box好用，同时指定padding、width、border就知道为什么了

示例：

二、margin合并

1.会合并的情况

• 父子margin合并
• 兄弟margin合并

注意：

• 上下可以合并，左右不可以

2.如何组织合并

• 父子合并用padding/border挡住
• 父子合并用overflow:hidden挡住
• 父子合并用display:flex,不知道为什么
• 兄弟合并是符合预期的
• 兄弟合并可以用inline-block消除 #三、基本单位

1.长度单位

• px像素
• em相对于自身font-size的倍数
• 百分数
• 整数
• rem
• vw和vh
• 其他长度单位都用的很少，不用太去了解

2.颜色

• 十六进制#FF6600或者#F60
• RGBA颜色rgb（0，0，0）或者（0，0，0，1）
• hsl颜色hsl（360，100%，100%）