一、background-clip

为什么上来先说background-clip属性呢，因为其他几个属性互有关联，background-clip属性则相对独立一些。

background-clip属性是用来规定背景的绘制区域

有三个可以指定的值：

border-box 绘制背景到边框外框

padding-box 绘制背景到内边距外侧框（即border内框）

content-box 绘制背景到内容框（即padding内框）

我感觉我用绘制来表述background-clip属性的作用，比一些网站使用裁剪一词相对好理解一些。

至少我个人认为如此~~~

使用background-clip属性可以实现一些图形的绘制

譬如常用的三条杠，移动端常用作菜单未展开时的按钮，如下图所示：

.box{
  width: 120px;
  height: 20px;
  border-top: 20px solid currentColor;
  border-bottom: 20px solid currentColor;
  padding: 20px 0;
  background-color: currentColor;
  background-clip: content-box;
  color：grey;
}

CSS如上所示，主要思路是使用background-clip属性将背景绘制区域局限在content内部，content和上下边框作为三条杠杠，使用透明的padding来隔绝。

如果把中间的content变成圆心，将border花完整，也变圆，就得到了双层圆点。，如下图所示：

代码如下：

.box{
  width: 120px;
  height: 120px;
  border: 30px solid currentColor;
  border-radius: 50%;
  padding: 30px;
  background-color: currentColor;
  background-clip: content-box;
  color: red;
}

ps：currentColor 是CSS里为数不多的变量之一，它的代表当前字体的颜色，有时候使用它就很方便了。

二、margin

1. margin表示盒模型的外边距，本身不参加盒子宽度的计算，值可以设为负值。
2. 有的时候margin垂直方向会发生合并。margin在垂直方向可以理解为，对外部元素说“你离我20px远”，而不是“我要有20px的私有距离”。所以当有以下情景的时候，会发生垂直方向上margin的合并：
   • 相邻兄弟元素之间垂直方向上marginhui发生合并;
   • 父元素margin-top和子元素margin-top，父元素margin-bottom和子元素margin-bottom垂直方向上会发生合并；
   • 空块级元素自身的margin-top和margin-botom垂直方向上会发生合并;
3. margin:auto 能够在块级元素设定了宽高后自动计算，填充剩余宽高，当然这需要margin在该方向上具备自动填充的特性，一般块级元素默认水平方向上是具有的，而垂直方向上具有。

如果一个方向margin两边的值都为auto的话，则会自动均分，一般用于水平居中。

当然也可以通过position来激活自身垂直方向的填充特性，进而实现垂直居中。

代码如下：

{
    position: absolute;
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}

4. margin如果按照百分比赋值，参照的依据也同样是父元素的宽度。

三、writing-mode

horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom

vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left

vertical-lr：垂直方向内内容从上到下，水平方向从左到右