CSS notes

关于盒子模型：
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）， 可以把每一个容器（比如div）都看做是一个盒子模型。
height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域（也即content）的高度/宽度！若要将宽度保持为 300px而无论填充量如何，那么可以使用box-sizing属性并设置为border-box，这将使得元素保持其宽度。如果增加内边距，则可用的内容空间会自动地减少。也就是说，加了box-sizing: border-box属性，padding和border的值就不会再影响元素的宽高，相当于把padding和border的值都算在content里。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

关于symbol：

symbol元素用来定义一个图形模板对象，它可以用一个<use>元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了无障碍。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 <use>元素）才能呈现。 特点如下:

• 支持多色图标，不再受单色限制。

• 支持像字体那样通过font-size,color来调整样式。

viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。symbol中有一个属性为viewbox：viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素。

 <symbol id="ew-check" viewbox="0 0 12 10">
 </symbol>
 ```
 <svg class="ew-checkbox-icon" width="12px" height="10px">
      <use xlink:href="#ew-check"></use>
 </svg>
```

关于justify-content：
justify-content 定义浏览器如何沿着弹性容器（flex布局）的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

justify-content: space-between; /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */

关于align-items：
align-items 属性设置了所有直接子元素的 align-self 值作为一个组。在 Flexbox 中，它控制子元素在交叉轴上的对齐。在 Grid 布局中，它控制了子元素在其网格区域内的块向轴上的对齐。一般设置为center可以实现居中对齐（默认flex-direction为row，也即水平方向为主轴，此时设置align-items为center可以实现垂直居中，而当设置flex-direction为column时，若align-items为center，则代表水平居中）。