一个小白的成长历程

使用css变量实现圆形静态饼图的百分比与进度条的进程；结合css的样式来展示进度，使用opacity与counter来展示进度的百分比值；

使用css的属性制作一些小众的样式，减少使用对icon图片导入；使用background多背景实现icon的加减效果这里应用多背景的属性，书写加减后的图标；代码示例如下：<style>.btn-add,.btn-sub { width: 1.5rem; height: 1.5rem; border: 1px solid gray; background: linear-gradient(currentColor, currentColor) no-repeat

常见的渐变色边框的实现；可以实现对布局没有影响的轮廓扩展，分别是：outline轮廓，box-shadow盒阴影，border-image边框图片；

css元素不能往前选择，即不能选择父元素或前兄弟元素；这都受制于DOM渲染规则；而这里我们使用别的方法来实现前元素或父元素选择的效果；有改变dom的排版位置，:focus-within伪类的选择；

css选择器的逻辑组合伪类 -not()/ is()/where()在项目中的使用；可使代码更加简洁，更好理解，保护了类名的优先级，扩展性更强，更利于维护！

css选择器的输入伪类，实现各自输入状态的匹配 - 实现Material Design风格的输入框样式体验

css选择器中url定位的伪类 - 有关:link ， :visited， :hover，:active， 目标:target的使用，使用:targe的方法实现原本需要JavaScript交互布局的效果，改善锚点匹配所带来的浏览器跳动的不好体验；

该篇的内容主要写的是用户行为的伪类，指的是与用户行为相关的使用；:hover/:active/:focus的根据伪类提高用户的体验，其兼容性的问题也对伪类的实现有影响，需要考虑到不同平台之间的影响！

css的属性选择器[attr='']，属性的正则匹配[attr^/*/$='']的使用；在项目中的使用自定义属性样式的管理！

css选择器中的子索引伪类使用，有关:last-child与:last-of-type的区分，有无当前元素状态的区分，并且借助伪类实现动态标签元素生成的样式匹配，从而达到不使用js也可根据列表的数量更改其对应样式

content与计数器counter()/counters()之间的使用，呈现章节列表和书籍目录

替换元素 - content的使用，一些属性特征的介绍，web兼容性实现处理方法

实现一个底部留白的效果 - 真正不占据空间的属性;当页面的内容不足以撑起一整页时，可用此方法补充留白的区域展示，不会影响其布局，完全自适应，并且兼容性较好

用css巧妙的解决弹窗时背景的内容依然滚动的问题，避免使用到js

图片与底部的间隙处理，font-size与line-height的作用；vertical-align与display：inline-block的影响，

z-index的层叠规则的使用，层叠上下文的关系与z-index值在元素之间的影响!并不是简单的数值间的比较

css书写animation的loading的加载展示，不添加图片与gif的动图

scss在项目中，常用的定义常用的变量与mixin的混合使用

position定位的使用相对定位（relative）：相对于块级元素（或行内块）自身位置进行定位；绝对定位（absolute）：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；绝对定位的偏移量的top/bottom,left/right是相对于已设置relative的祖先元素1.有定义偏移量的值（top/bottom,left/right）是相对父元素的相对于父级元素的占位区定位（包含padding区域）2.没有定义偏移量的值（top/bottom,left/ri

定宽高的自适应居中.dialoge { // dialoge的固定宽高显示 position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 1rem; height: 1rem; margin: auto;} .content { background: #ccc; text-align: center; line-height: 1rem; border-radius: .1rem;}<div cl