一.布局思路

二.对CSS代码的初步解析

三.对CSS的解析的更进一步解

2) CSS属性书写顺序 以及里面包含的知识点
      3) Overflow 和 text-overflow 的区别?

4) 伪类和伪元素区别(做案例时的一些思考)

四. JS代码的解析

五. 在做本案例期间的思考 与 知识点之间的迁移

---

布局思路:

一个大盒子里面 5个小盒子 使用检查 将图片扣下来(当然可以选自己喜欢的图片的哦 小卓我是为了达到复原的效果)

使用 background-image 而不是使用 img 是因为本demo 展示的效果是 随着盒子的打开图片逐渐展示在我们的眼前

---

二.对CSS代码的初步解析

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');* {box-sizing: border-box;
}/*网页布局的核心本质? 就是利用CSS摆放盒子box-sizing: border-box;其中 border-box属性的作用: 是告诉浏览器: 你想要设置的边框和内边距都包含在width内  其次 其次大多数情况下 这个使得我们更容易地设定一个元素的宽高说白了 box-sizinng最主要的用法 还是规定容器元素的最终尺寸的计算方式 */body {font-family: 'Muli', sans-serif; display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}/* 1. font-family  作用: 定义文本的字体系列   其中属性值的作用:  Muli  是一款用于广告设计方面的中文简体字体sans-serif  是代表无衬线字体 说白了就是没有多余装饰   具体可以移步 ===>   http://t.csdn.cn/GHqWH2. display 属性常见的四种用法及其详解: 1)dispaly:none; 2)display:block; 3)display:inline; 4)display: inline-block;1)display:none; 小卓同学目前使用过的情况是 做小的且点击可以关闭的广告(起到隐藏的效果)当然也可以移步 或者继续往下看 ===> http://t.csdn.cn/m8otDdisplay:none; 使被添加此属性的东东 在界面上将不显示,且不保留原来的位置这玩意一般总是被拎出来和 visibility: hidden; 进行对比小小的扩展一下:   visibility: hidden; 设置后使被添加此属性的东东从界面上不显示 但是原本所占的空间仍然保留2)display: block; 除了转换为块级元素之外, 同时还有显示元素的意思display:block;  独占一行 且 可以设置宽度和高度  3)display:inline;   就是不能设置那个上下的margin和padding 还有不能设置宽度在一行内可以多个4)display:inline-block; 一行内可以放多个行内块元素可以设置宽度和高度 3. align-items:center;           这个就牵涉到flex布局 可以移步这个笔记  或者继续往下看  ===> http://t.csdn.cn/ciHU7 align-items:center;   设置侧轴上的子元素排列方式                             flex布局: 1) flex布局的原理: 说白了就是通过给父盒子添加flex属性, 来控制子盒子的位置二号排列方式2) 我们在布局弹性布局一般先设置主轴的方向(flex-direction: row(默认从左到右) | row-reverse(从右往左) | column(从上到下) | column-reverse(从下到上))3) flex布局中, 默认的子元素是不换行的 如果装不下, 则会缩小子元素的宽度, 放到父元素里面4. justify-content:center;这个也是flex布局的内容了哦  justify-content 属性定义了项目在主轴上的对齐方式注意点: 就是这个属性在使用之前 一定要确定好主轴5. height  略(doge)哈哈哈哈哈哈哈6.overflow: hidden;  (具体的请看 三. 对CSS的解析的更进一步解析)1)  防止塌陷2)  溢出部分隐藏3)  清除浮动7.margin  1) margin 0 auto;  代表的意思是水平居中在CSS中的margin属性种设置对象外边距, 如果值只有两各第一个表示上下边距第二个表示左右边距   0 auto  表示上下边界为0  左右根据宽度自适应相同值(即水平居中)2) margin 塌陷就是 父子嵌套的时候 元素垂直方向的 margin取最大值 解决方法:     float属性为left/rightoverflow为hidden/scroll/autoposition为absolute/fixeddisplay为inline-block/table-cell/table-caption*/                  .container {display: flex;width: 90vw;
}.panel {background-size: cover;background-position: center;background-repeat: no-repeat;height: 80vh;border-radius: 50px;color: #fff;cursor: pointer;flex: 0.5;margin: 10px;position: relative;-webkit-transition: all 700ms ease-in;
}/* 1. background-size: cover; 作用是: 将背景图像完全覆盖背景区域但是 背景图片的某些部分也许无法显示在背景定位区域种2. background-position: center; background-position 属性设置背景图像的起始位置。 第一个属性值确定x轴的位置  第二个属性值确定y轴的位置3. background-repeat ;作用是  是否平铺  说白了就是使 background-image 不会出现重复4. vhvh是CSS3的新单位, 是view height的简写, 是指可视窗口的高度.假如高度是 1200px的话  10vh 就是 120pxvw 同样也是CSS3的新单位, 是view weight的简写 假设高度是8888px  10vw 则为8885. border-radius;  可以继续往下看 或者 移步===> http://t.csdn.cn/JZs49border-radius 属性用来设置元素的外边框圆角想要设置一个圆:当我们 在使用中 如果是个正方形, 把数值修改为 宽和高的一半如果是个矩形, 设置为高度的一半就可以了6. cursor ;   说白了就是 鼠标在被设置 cursor:属性值; 的对象上光标的形状以什么样子显示7. flex: 某数字; (关于弹性布局 详细的请看 三)flex属性是用来定义 子项目 分配剩余空间  用flex表示占多少份8. position 看三如果仅仅是指项目中的语句 语义就是相对定位的意思9. -webkit-transition;1) 首先 CSS3属性前添加私有前缀  是因为CSS中因为要兼容不同浏览器的属性支持, 浏览器厂商会在属性前加一个私有前缀来支持新属性; 所以 前缀为 "-webkit-"的属性, 能够以webkit为内核的浏览器中正常使用2) transition 就是过度哦  总之就是这个是表达语义是 在webkit浏览器中可以适配的 过度*/.panel h3 {font-size: 24px;position: absolute;bottom: 20px;left: 20px;margin: 0;opacity: 0;
}
/* opacity 代表的是元素的不透明级别 (容器中的背景色和文字都会受到影响)
*/.panel.active {flex: 5;
}.panel.active h3 {opacity: 1;transition: opacity 0.3s ease-in 0.4s;
}/*
transition可以看看这位大佬的  ===>https://juejin.cn/post/6844903615920898056transition(过度)  含义: 用于设置元素的样式过度什么叫过渡？字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。*/@media (max-width: 480px) {.container {width: 100vw;}
/* @media 规则在媒体查询中用于为不同的媒体类型/设备 应用不同的样式对于案例中的语句  语义是 调整浏览器窗口的大小. 如果此文档的宽度为 480px像素或者更小, 那么那么就执行其中的CSS代码
*/.panel:nth-of-type(4),.panel:nth-of-type(5) {display: none;}/* 定义和用法::nth-of-type(n) 选择器匹配属于父元素的特点类型的第N个子元素的每个元n 可以是数字, 关键词或者公式*/
}

三. 对CSS的解析的更进一步解析

1)  @import  @import CSS@规则，用于从其他样式表导入样式规则。
url
是一个表示要引入资源位置的` <string> 或者 <uri> `(en-US) 。 这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件； 可以只指明包名，然后合适的文件会被自动选择 (e.g. chrome://communicator/skin/). See here 了解更多。@import 是css提供的语法规则, 只有导入样式表的作用
@import 引入的CSS将在页面加载完毕后被加载
@import 是CSS2.1才有的语法,即在IE5+以上才能识别

2) CSS属性书写顺序 以及里面包含的知识点

1.布局定位属性: display/ position/ float / clear /   visibility/overflow
   2.自身属性: width/ height / margin / padding / border / background
   3.文本属性: color / font / text-decoration / text-align / vertical-align / white-space / word-break
   4.其他属性(CSS3): content/ cursor/ border-radius / box-shadow / text-shadow / background: linear-gradient

注:
Content content 属性与: :before 及 ::after 伪元素配合使用，来插入内容

background: linear-gradient 常见用法: background: linear-gradient(渐变角度, 颜色a, 颜色b)
渐变角度: 180deg (注:deg是 degree "角度" 的缩写) 代表从上往下渐变(即从a颜色逐渐 渐变为 b颜色)
90deg 为从左往右渐变, -90deg从右往左
0deg从下往上渐变

white-space: nowrap 不换行
white-space规定段落中的文本对换行的处理

word-break: beak-all(允许在单词内换行) / keep-all(只能在半角空格或连字符处换行)
注释: 【全角与半角的区别】
半角和全角是中文在电脑上的特有的。 一个汉字字符在电脑上要占两个英文字符的位置，当输入符号的时候全角的字符也是要占两个英文字符的位置，半角的只占一个字符也就是半个汉字的位置。半角的显示内码都是一个字节。 )

3) Overflow 和 text-overflow 的区别?

text-overflow 常用于使溢出部分以省略号显示 即 text-overflow: ellipsis;
overflow 常用于 隐藏溢出部分 即 overflow: hidden;
关于 overflow: hidden; 的更多用法
拓展:
Overflow: hidden的作用:
摘自大佬的:
1) 给一个元素中设置overflow: hidden; , 那么该元素的内容若超出了给定的宽度和高度属性, 那么超出的部分将会被隐藏, 不占位
2) Overflow: hidden; 还可以用来清除浮动 如果再加上一个 zoom: 1; 更是兼容了低版本浏览器(当然小卓所见基本都可以 直接 overflow: hidden; 但是加上 zoom: 1; 更好不是嘛
即: overflow: hidden; /*清除浮动*/
      zoom:1;           )
3) 还可以解决外边距塌陷哦
就是说 父级元素内部有子元素, 如果给子元素添加 margin-top样式, 父级元素也跟着下来就使造成了 塌陷
处理方法: 就是 给父元素 添加 overflow: hidden;

>

4) 伪类和伪元素区别(做案例时的一些思考)

在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。
伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素
那如何区分伪元素和伪类，记住两点：
1. 伪类表示被选择元素的某种状态，例如:hover
2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after
3.

声明以下两张图片引用自 掘金某大佬 可以由链接跳转

伪元素和伪类核心区别在于，是否创造了“新的元素”

链接：引用自大佬的文章

5 ) overflow: hidden;
         1.溢出隐藏
         2.清除浮动
         3.解决外边距塌陷

1.溢出隐藏: 给一个元素中设置 overflow:hidden, 那么该元素的内容若超出了给定的宽度和高度属性, 超出的部分隐藏, 不占位置

2. zoom是IE专用属性, firefox等是不支持的, 让本来的作用是设置或者 检测对象的缩放比例, 设置zoom:1可以在IE6及其以上版本浏览器中 清除浮动、解决margin导致的重叠等问题。在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候

3.解决外边距塌陷
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，
解决: 因此，给父级元素添加overflow:hidden，就可以解决这个问题了。

6 ) flex布局

7 )

属性	作用	是否脱离文档流
static	默认	是
absolute	相对于非static父元素进行定位	是
relative	相对于元素其原来进行定位	是
fixed	相对于浏览器窗口进行定位	是
sticky	粘性定位可以被认为是相对定位和固定定位的混合	据情况而定

---

四. JS代码的解析

const panels = document.querySelectorAll('.panel')
// querySelectorAll()方法返回文档中 指定CSS选择器的所有元素
//当展开其中一个时，在点其他的并不会关闭第一个已展开的效果，
//若要达到每次点击都是一个聚焦效果（关闭其他已展开的）panels.forEach(panel => {panel.addEventListener('click', () => {removeActiveClasses()panel.classList.add('active')})
})
//forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。//addEventListener() 方法用于向指定元素添加事件句柄。
//事件句柄是指事件发生时要进行的操作。//add() 方法把元素添加到已存在的元素组合中。// classList 属性返回元素的类名，作为 DOMTokenList 对象。
// 该属性用于在元素中添加，移除及切换 CSS 类。
// classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它function removeActiveClasses() {panels.forEach(panel => {panel.classList.remove('active')})
}//removeClass() 方法从被选元素移除一个或多个类。

五. 在做本案例期间的思考 与 知识点之间的迁移

1.文档流相关知识(多为摘录大佬们的佳作 学有所小成后 一定会对文章进行重新修订并且加入个人的理解)

1 ) 什么是文档流?

(这篇让小卓收益最大)
文档流的定义:
      页面在解析的时, 遵循从上向下, 从左向右的顺序
              1.从上至下,从左至右的布局
              2. 符合HTML标签本身含义的布局, 比如某些标签独占一行.
文档流, 也叫做普通流
2) CSS中都有那些定位机制呢?一共有几种呢?
CSS中有三种定位机制 且分别是:
        1.正常的文档流
        2. 浮动(float)
        3. 定位(position)
3) 什么是脱离文档流?
    脱离文档流是指, 这个标签脱离了文档流的管理, 不受文档流的布局约束, 并且更重要的是, 这个标签在原来文档流中所占的空间也将会被清除

脱离文档流的元素处于浮动状态 (可以理解为漂浮在文档流的上方) , 当一个元素脱离文档流后, 依然在文档流中的其他元素将忽略该元素并填充其原先的空间

【新星计划】Demo---Expanding Cards------ 1/50(详解)相关推荐

1. 【新星计划】MATLAB-冒号：符号详解

   MATLAB 中可以使用 ":" 来建立矢量.下标数组和指定的迭代,是最有用的 MATLAB 运算符之一. 下述例子建立了一个包括 1~10 的一个行向量: 1:10 MATLAB ...

2. 制作主生产计划MPS报表（概念+习题详解）

   目录 主生产计划了解 一.计算流程 (一)图示 (二)计算步骤及计算方法 第1步推算毛需求 第2步推算预计库存(PAB)初值 第3步推算净需求 第4步推算计划产出量 第5步推算预计可用库存量. 第6步 ...

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

   ​ 看详解前 请务必具备的基础知识: 1.什么是基线 2. 元素的分类 3. justify-content; 的那些事 ​​​​​4.区分伪类和伪元素(以下内容 帮助理解与区分) 1 ) 1.伪元素 ...

4. power apps -- Game Demo page 制作游戏步骤详解

   1.新建1个Canvans app 2.在screen中插入星星角色和吃豆人角色,以及倒计时的装置和控制上下左右的icon 3.选好自己需要的icon之后,移动组件,整理自己的screen面板 4.接 ...

5. SAP MRP例外信息详解

   更多价值文章在微信公众号,点击如下连接阅读,欢迎关注: *SAP ERP系统PP模块MD07报表用途说明* SAP ERP系统PP模块MRP运行参数说明 SAP ERP系统PP模块计划策略20& ...

6. jQuery队列控制方法详解queue()/dequeue()/clearQueue()

   jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于anim ...

7. 50 Projects 50 Days - Expanding Cards 学习记录

   50 Projects 50 Days不使用任何前端框架,适合初学者练手,巩固前端基础,在这里记录一下学习过程,尤其是一些细节上的问题. 项目地址 Expanding Cards 展示效果 Expan ...

8. win7下计划任务schtasks使用详解及错误:无法加载列资源的解决方法1

   win7下计划任务schtasks使用详解及"错误:无法加载列资源"的解决方法1 2011-12-10 20:33 schtasks 命令简述: 安排命令和程序,使其定期运行或在指 ...

9. 新星计划·第三季【博文流量密码公开课】

   一.新星计划 "新星计划"是一个以发掘潜力新人.培养优质博主为目标的创作活动,通过为期一个月的时间,让资深"导师"和新人"学员"近距离接触, ...

最新文章

1. ​2019年最新华为、BAT、美团、头条、滴滴面试题目及答案汇总
2. 收藏！细胞增殖实验要点详解
3. hadoop yarn的三种资源调度器详解
4. java获取上传图片的大小_java 图片上传的处理，获取图片大小，宽高。
5. uva 1045(二分图最大权匹配)
6. Linux中使用Apache发布html网页
7. 【裂缝识别】基于matlab GUI无人机裂缝图像处理系统（带面板）【含Matlab源码 1727期】
8. 模型计算机微指令总表,基于微程序控制器的模型计算机设计
9. 金融计算机加权平均,加权平均
10. 华为升级鸿蒙系统教程,华为升级鸿蒙系统方法汇总 华为手机各型号升级鸿蒙系统教程...
11. 用html制作的旅游相册名字唯美,好听的相册名字
12. 联想e470加装固态硬盘_联想e470能不能加固态硬盘？
13. 基于Java Web的房屋出租管理系统
14. an error occurred while creating opening the c++ browsing database 解决办法
15. 豆瓣top250-词云案例
16. JAVA基础知识练习（减肥计划、逢七过、不死神兔、百钱百鸡、数组元素求和、数组内容相同、查找、反转、评委打分）
17. vue项目微前端试水
18. 你知道我们常说的“向前兼容”和“向后兼容”都是什么意思吗？
19. 方便、免费的PDF在线处理网站汇总：PDF合并、文字编辑、页面提取与删除、格式转换…
20. css flex布局网页小游戏

热门文章

1. 【JavaEE】JavaScript（WebAPI）
2. Hutool工具类之excel导入导出
3. 14.曲面消隐——图像空间算法（Z-buffer）+对象空间算法（画家算法+二叉空间剖分树）
4. IDEA导出jar包后运行报错 找不到或无法加载主类
5. 计算机word表格基础,Word表格的作-计算机基础.doc
6. 【AI理论学习】多模态介绍及当前研究方向
7. 《信息系统安全》第二章 信息安全模型 作业
8. 【MicroPython ESP32】ssd1306驱动0.96“I2C屏幕+mpu6050图形控制
9. JAVA -Xms与-Xmx区别
10. xbox360链接pc_如何在Windows PC上使用Xbox One控制器