CSS盒模型两种盒模型：content-box和border-box margin合并：父子合并和兄弟合并基本单位：长

两种盒模型

分别是

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

公式

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

border-box更好用

因为content-box只包含内容，而border-box包含到边框，具体包含了内容、内边距、边框。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<style>
  .content-box {
  margin: 25px;
  border: 5px solid blue;
  padding: 15px;
  box-sizing: content-box;
  width: 100px;
  height: 100px;
}
.border-box {
  margin: 25px;
  border: 5px solid green;
  padding: 15px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}</style>
<body>
  <div class="content-box">content-box</div>
  <div class="border-box">border-box</div>
</body>

</html>

margin合并

那些情况会合并

第一个子元素和最后一个子元素会和父元素出现外边距重叠的情况(只有上下重叠，左右从不重叠)
子元素之间会出现margin合并

如何阻止合并

父子合并：

padding/border挡住
overflow: hidden 挡住
display: flex 阻止

兄弟合并：

display：inline-block挡住

基本单位

长度单位

px像素
em相对于自身font-size的倍数
百分数
整数
rem
vw和vh

颜色

十六进制#FF6600或者#F60
RGBA颜色rgb（0，0，0，）或者rgba（0，0，0，1）
hsl颜色hsl（度数，饱和度，亮度）

注：

rgba（0，0，0，1）最后一个参数是透明度
hsl(360,100%,100%)
度数：0~360 赤橙黄绿青蓝紫
饱和度：越小约暗，越大越鲜艳
亮度：越小越黑，越大越白