本文将介绍一下CSS的基础知识，从四部分进行介绍，分别是Casading规则、优先级，继承，CSS的值和单位，盒模型。因为本文介绍的为基础知识，所以涉及到的专业方面不是太多，有些内容会根据作者的实际应用来写，请大家按需索取。
1.Casading规则、优先级
Casading规则又称为层叠规则，样式表中一些声明的规则集合会产生冲突，而层叠规则就是用来解决冲突的。层叠规则的优先级从大到小分别是样式表来源、选择器优先级、源码位置。
1.样式表来源
样式表来源的优先级的递增顺序：
- 用户代理样式
- 用户样式表
- 作者样式表
- 作者样式表中的！important
- 用户样式表中的！important
- 用户代理样式表中的！important
2.选择器优先级
内联>id>class=attribute=pseudo-class>type=pseudo-element
内联样式不属于选择器，为了方便比较记忆，放在这里做对比
3.源码位置
谁最后声明谁生效。对于@import的样式，根据@import的顺序来决定，对于link和style标签的样式；根据在document中的顺序决定。
2.继承
大部分具有继承特性的属性和文本相关，如color、font、font-family、font-size等以及少部分列表、表格的属性，一般继承父元素的内容，也可以用inherit关键字显式指定一个属性值从其父元素继承。
3.CSS的值和单位
- 值有文字类、数值类以及函数生成类
- 文字类：比如像initial这种关键字，颜色、位置等等；
- 数值类：比如z-index：1这种数值，或者带有单位的数值、百分比等；
- 函数生成类：比如caic()、min()、max()等。
- 单位有长度、角度、时间、分辨率
- 长度：又分为绝对长度和相对长度，绝对长度有px、pt、cm、in等，相对长度有em、rem、ex、rex等；
- 角度：如deg、grad等；
- 时间：如s、ms等；
- 分辨率：如dpi、dpcm、dpcx等。
4.盒模型
浏览器根据视觉格式化模型（visual formatting model），将所有元素表示为盒子模型，CSS通过盒模型做layout。
- 控制盒子类型： display：block、inline、inline-block、flex等
- 控制盒子大小&计算方式： width、height等，box-sizing：content-box、border-box等
- 控制盒中内容流： overflow：auto、scroll、hidden等
- 控制定位： position：static、relative、absolute、fixed、sticky等
- 是否可见： visibility：visible、hidden等
- 负外边距： padding、border、margin中，只有margin可以设置负值。设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠；如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。
视觉格式化模型 - CSS：层叠样式表 | MDN (mozilla.org)
本文到此为止，如有错误，敬请指正。
