CSS

1. 盒模型组成是什么？，box-sizing 有什么作用

下图为标准盒子（W3C 标准）

盒模型：margin(外边距) padding(内边距) border(边框) content(内容)
box-sizing:content-box / border-box / inherit 有以下三个属性
- content-box:指定元素的宽度和高度（最小/最大属性）适用于 box 的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外.
- border-box:指定宽度和高度（最小/最大属性）确定元素边框 box，对元素指定宽度和高度包括 padding 和 border 的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的“宽度”和“高度”属性计算
- inherit:指定 box-sizing 属性的值，应该从父元素继承

提示

先看看 css 有哪些伪类和伪元素，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，比如:hover。伪元素用于创建一些不在文档树中的元素，并为其添加样式，也就是虚拟存在的，比如::before。

类型	说明
:link	链接伪类，未访问链接
:visited	链接伪类，已访问链接
:active	链接伪类，鼠标点击时
:hover	链接伪类，鼠标悬停时
:not	CSS 否定伪类
:focus	获得焦点的元素
:focus-within	表示一个元素获得焦点或该元素的后代元素获得焦点
:placeholder-shown	在 `<input>` 或 `<textarea>` 元素显示 placeholder text 时生效
:first-child	所属父元素的首个子元素
:nth-child	所属父元素的第 N 个子元素
:nth-last-child	所属父元素的第 N 个子元素，从最后一个计算
:nth-of-type	针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置
:first-of-type	表示一组兄弟元素中其类型的第一个元素
:last-of-type	父元素的所有子元素中的最后一个选定元素
:empty	没有子元素的元素。子元素只可以是元素节点或文本（包括空格）
:target	代表一个唯一的页面元素(目标元素)，其 id 与当前 URL 片段匹配
:checked	表示任何处于选中状态的 radio
:enabled	表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的
:disable	表示任何被禁用的元素

提示

配置作用：在 vue 项目中使用，删除未使用的 CSS 代码，达到减少项目打包压缩的作用

提示

文档目的：学习 CSS 预处理 SCSS 语法

SCSS 是 CSS 的一种扩展语言，具有良好的复用性和动态性

$primary-color: #f5222d;
$font-color: #ecac4a;
$primary-border: 1px solid $primary-color;