两种盒模型

1. content-box：内容盒—内容content就是盒子的边界；

   content-box的width=内容宽度；

2. border-box：边框盒—边框border才是盒子的边界 ；

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

详图：

注：box-sizing：用来选择到底是border-box还是content-box；需要同时指定padding、width、border才知道两者的具体区别；

margin合并

1. 什么时候会合并？

• 父子合并：

  

  注：即使父子的外边距大小不一样，它们也还是会合并；

• 兄弟合并：

  

注：外边距只有在上下方向上会合并，左右方向上是没有的；

2. 如何阻止合并？

纠正问题：body的范围

注意body的范围，不要自认为它是整个页面，其实人家是有地位的。

父子之间

• 给父元素添加个border-top或padding-top

  注：因为margin合并的前提就是它们之间什么都没有，而现在，如果他们之间有了border和padding，就不能合并了；

  下面是加padding的效果：

  

  

• 父子合并用overflow:hidden挡住；

  

• 父子合并用display:flex;

兄弟之间

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

  

总之，上述内容要一条一条记清楚，而且CSS属性逐年增多，每年都可能有更新，这也提醒我们要时刻保持学习啊。

3. 基本单位

• 长度单位

  • px像素；（pixel）
  • em相对于自身font-size 的倍数；
  • 百分数；
  • 整数；
  • rem：先会用em；
  • vm和vh;
  • 其他长度单位都用的很少，不用了解；

• 颜色

  • 十六进制：当两个值一样时（如#FF6600），可以缩写成（#F60）。

    注：只有这种缩写成三个的情况，十六进制也可以选择透明度，但是其兼容性需要测试

  • rgb(0,0,0)或者rgba(0,0,0,1)：

    注：rgba中的a指的是是否透明，最大值是1即完全不透明，最小值是0即完全透明，全透明也可以直接用transparent

  • hsl(360,100%,100%)：三个参数分别是色相、饱和度、亮度

备注：

想要了解谁能用哪个单位，可以去mdn;

取色后，如果只有rgb没有十六进制的，可以通过谷歌搜“rgb转16进制”，来转换，反之亦然；

嫌麻烦可以装个Snipaste；

4. 实践

学完以上内容，你可以尝试做个彩虹练练手，七彩的哦。

这是我的彩虹，欢迎参考。