Demo---progress-steps------ 2/50(详解)

​
看详解前 请务必具备的基础知识:

1.什么是基线

2. 元素的分类
3. justify-content; 的那些事

​​​​​4.区分伪类和伪元素(以下内容 帮助理解与区分)
1 ) 1.伪元素在CSS3中使用 双冒号 :: 之前是 :
2 . 伪类选择器是用来向某些选择器来添加效果
3.伪元素选择器则是用来将特殊的效果添加在选择器上的
2 ) 什么是伪类?

3 ) 什么是伪元素?

5.<iframe>HTML内联框架元素,可以将另一个HTML页面嵌入到当前页面中 说白了 iframe 用于在网页内显示网页。

6.2D 和 3D

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

/* 
    @import 引入其他样式表
*/


:root {
  --line-border-fill: #3498db;
  --line-border-empty: #e0e0e0;
}

/* 
   首先 jQuery :root 选择器
        :root 这个CSS 伪类 匹配文档树(文档树，是用来描述文档目录结构的工具 但是小卓的理解是因为HTML是页面的骨架 可以理解为所谓的树也就是根)的根元素.
             对于HTML来说,  :root表示<html>元素
        :root 选择器选取文档的根元素。
        在 HTML 中，根元素总是 <html> 元素。
    其次 使用CSS自定义属性  ===>  可以移步https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
                                或者往下看 
     我们要明白类似于 --line-border-fill 属于CSS中的自定义属性 (变量)
         其基本用法:
                    声明一个自定义属性, 属性名 需要  以两个减号(--) 开始, 属性值则可以是任何有效的 CSS值
                    注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，
                            这样就可以在HTML文档的任何地方访问到它了：
                                    例子: 
                                    :root {
                                            --line-border-fill: #3498db;
                                            --line-border-empty: #e0e0e0;
                                            }

 */


* {
  box-sizing: border-box;
}

/* 
    box-sizing: border-box; 是告诉浏览器: 想要设置的边框和内边距 都包含在 width内
                            box-sizing 让我们规定了容器元素最终尺寸寸的计算方式

*/

body {
  background-color: #f6f7fb;
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

/* 
    1.font-family; 
             font-family 作用: 定义文本的字体系列
        其中属性值的作用: Muli 是中文简体字体
                            sans-serif 是代表无衬线字体 说白了就是没有多余装饰

    2. dispaly 属性常见的四种用法及其详解:
                    1) display:none;
                    2) display:block;
                    3) display:inline;
                    4) display:inline-bolck;

                1) display:none;
                          这个可以用来做小的且可以关闭的广告(起到隐藏的效果)
                             display:none;  是被添加此属性的东西 在界面上将不显示, 且不保留,
                2) display:block;
                          除了转换为块级元素之外, 同时还有显示元素的意思
                          display:block; 独占一行 且  可以设置宽度和高度
                          块级元素的特点:
                                    1.独占一行
                                    2.高度,宽度,外边距以及内边距都可以控制
                                    3.宽度默认是容器(父级宽度)的100%
                                    4.是一个容器及盒子, 里面可以放行内或块级元素      
                3) display:inline;
                          不能设置上下的margin和padding
                          行内元素特点:
                                    1.一行内可以放多个行内元素,且在一行内显示
                                    2. 高,宽直接设置是无效的
                                    3. 默认宽度就是它本身内容的宽度
                                    4.行内元素只能容纳文本或者其他行内元素
                4) display:inline-block;
                           行内块元素特点:
                                    1.和相邻行内块在一行上, 但是他们之间会有空白间距
                                    2.默认宽度就是它内容本身的宽度(行内元素特点)
                                    3.高度,行高,外边距以及内边距都可以控制(块级元素特点)                
    
   3. 区分 align-items 与 justify-content;
        align-items 属性定义flex子项在flex容器的当前行的(侧轴)纵轴方向上的对齐方式
        justify-content 用于设置或检索弹性盒子元素在主轴(横轴) 方向上的对齐方式

   4. vw 与 vh
        viewpoint width 视窗宽度, 1vw=视窗宽度的1%
        viewpoint height 视窗高度  1vh=视窗高度的1%
     拓展:
            em 它是描述相对于当前元素的字体尺寸, 所以它也是相对长度单位.
          一般浏览器字体大小默认为16px, 则 2em==32px
            rem 作用于根元素, 相对于原始大小 (16px) 
                作用于 非根元素 相对于根元素字体大小

    5. overflow: hidden; 三个用途 第一防止塌陷 第二隐藏溢出的部分 第三清除浮动
                 解释:
                        第一: 父级元素内部有子元素,如果子元素添加了 margin-top样式 父元素跟着下来 则是造成了塌陷
                                此时的解决方案就是: 给父元素添加 overflow:hidden;

                        第二: 略
                        第三: 用来清除浮动
                                 {
                                     overflow:hidden;
                                     zoom:1;
                                 }                           

*/

.container {
  text-align: center;
}
/* 
    text-align 属性指定元素文本的水平对齐方式

*/

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
}
/* 
    1. display属性常见的四种用法
           1) display:none;
           2) display:block;
           3) display:inline;
           4) display:inline-block;
     
             1) display: none;  (移步下方 有代码例子)
                    CSS使用display显示显示隐藏元素的方法: 1.display:none; 样式即可隐藏元素
                                                        2.display:block; 样式即可将隐藏的元素显示出来
            2) display: block;
                    第一个作用将某元素转换为 块元素
                            块元素的特点:
                                    1. 独占一行
                                    2. 可以设置宽 高 外边距 内边距
                                    3. 默认宽度为 父容器的100%
                                    4. 里面可以放行内或者块级元素
                    第二个作用是表示元素显示               
            3) display: inline;
                   需要注意的就是 行内元素的本身的使用
                            行内元素的特点:
                                    1. 一行内可以放多个行内元素
                                    2. 设置宽度 与 高度是无效的
                                    3. 默认宽度是文本内容的宽度
                                    4. 里面只能容纳行内或者 文本元素
            4) display: inlne-block;
                        行内块元素的特点:
                                    1. 一行内可以放多个行内块元素, 它们之间会有空白间隙, 且一行可以显示多个
                                    2. 可以设置 宽度 和 高度 外边距和内边距
                                    3. 默认宽度是它内容本身的宽度


      2. justify-content
                        设置主轴上的子元素排列方式  
                        
      3. position: relitive;
                        移动的位置是参照自己原来的位置在进行移动

      4. max-width: 数值;
                语义是: 设置段落的最大宽度;

                 
*/


     
.progress-container::before {
  content: '';/*等待总结*/
  background-color: var(--line-border-empty);  
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}
  
/* 
        transform
                transform 属性应用于元素的2D或者3D转换. 这个属性可以将元素旋转, 缩放, 移动, 倾斜  

        background-color: var(--line-border-empty);   
                var()函数 用于插入自定义属性的值
                        用法: 先在上面的代码提前定义一个 自定义属性  
                                    然后使用 var() 函数在样式表中插入该自定义属性的值
*/






.progress {
  background-color: var(--line-border-fill);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
}
/* 
    transition: 0.4s ease;  
         这里的译仅仅就是这个单词代表的中文意思 请不要误会
          property(译:属性) duration(译: 持续时间) time-function 
       简写 transition: property(指定被设置过度效果的元素) duration(规定完成过渡需要多久)  time-function(该属性允许过渡效果随着时间来改变其速度)  delay(过渡效果开始时间)
        ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
*/


.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--line-border-empty);
  transition: 0.4s ease;
}

.circle.active {
  border-color: var(--line-border-fill);
}

.btn {
  background-color: var(--line-border-fill);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 30px;
  margin: 5px;
  font-size: 14px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  background-color: var(--line-border-empty);
  cursor: not-allowed;
}