盒模型

两种分别是:

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

公式

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

盒模型是什么

css盒模型分两种，一种是content-box，一种是border-box,他俩的区别是content-box宽度只包含content，border-box的宽度包含到border，分别是border、padding和content。border-box更好用

图片示例

盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

margin合并

哪些情况会合并

父子 margin 合并
兄弟 margin 合并

如何阻止合并

父子合并用 padding / border 挡住
父子合并用 overflow: hidden 挡住
父子合并用 display: flex，不知道为什么
兄弟合并是符合预期的
兄弟合并可以用 inline-block 消除
总之要一条一条死记
而且 CSS 的属性逐年增多，每年都可能有新的

基本单位

长度单位

1.px 像素
2.em 相对于自身 font-size 的倍数
3.百分数
4.整数
5.rem：等你把 em 滚瓜烂熟了再问 rem
6.vw 和 vh
7.其他长度单位都用得很少，不用了解

颜色

1.十六进制 #FF6600 或者 #F60
2.RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
3.hsl 颜色 hsl(360,100%,100%)