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 与 vhviewpoint width 视窗宽度, 1vw=视窗宽度的1%viewpoint height 视窗高度  1vh=视窗高度的1%拓展:em 它是描述相对于当前元素的字体尺寸, 所以它也是相对长度单位.一般浏览器字体大小默认为16px, 则 2em==32pxrem 作用于根元素, 相对于原始大小 (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;
}/* transformtransform 属性应用于元素的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;
}

Demo---progress-steps------ 2/50(详解)相关推荐

【新星计划】Demo---Expanding Cards------ 1/50(详解)
一.布局思路二.对CSS代码的初步解析三.对CSS的解析的更进一步解 2) CSS属性书写顺序以及里面包含的知识点 3) Overflow 和 text-overflow 的区别? ...
CSS3中steps()动画的详解
原文作者:Joni Trythall 增修作者:Fegmaybe 一个是雪碧图的实现动画的steps效果.steps()阶跃函数,是transition-timing-function和animati ...
power apps -- Game Demo page 制作游戏步骤详解
1.新建1个Canvans app 2.在screen中插入星星角色和吃豆人角色,以及倒计时的装置和控制上下左右的icon 3.选好自己需要的icon之后,移动组件,整理自己的screen面板 4.接 ...
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于anim ...
SAP MRP例外信息详解
更多价值文章在微信公众号,点击如下连接阅读,欢迎关注: *SAP ERP系统PP模块MD07报表用途说明* SAP ERP系统PP模块MRP运行参数说明 SAP ERP系统PP模块计划策略20& ...
IOS 七种手势详解（动图＋Demo下载）
原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的博客专栏,这个关于IOS SDK的专栏我会持续更新 IOS SDK详解前言: 触摸是交互的核心,而手 ...
Qt开发技术：Q3D图表开发笔记（三）：Q3DSurface三维曲面图介绍、Demo以及代码详解
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/130264470 各位读者,知识无穷而人力有穷,要么改需 ...
BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
java编程50实例_java编程实例大全及详解谜底(50例).doc
java编程实例大全及详解谜底(50例).doc 还剩 33页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! 内容要点: 谓 ...

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

Demo---progress-steps------ 2/50(详解)相关推荐

最新文章

热门文章