- 博客(132)
- 资源 (1)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 image 标签的 width 和 height 有大作用!!!
我们将在这里探讨一个问题, 如果在加载图片之后不影响图片下边文字的移动.在给出答案之前, 要知道 在 2019 年之后 有了更多能力. 也就是浏览器会根据 和 计算 . 当然, 为了实现我们的目标, 提前知道图片的宽高比是必须的.感谢百度, 因为我用了百度的 图片作为展示. 图片的大小是 和 用来指定图片的宽度和高度, 虽然要求值都是以 为单位的数字, 但是下图中带单位的写法写生效作为标签属性的 是可以被 中的 覆盖的.下面我们需要开始处理. 将 540 和 258 分别除以 6 得
2023-12-30 09:15:23
450
原创 CSS overflow-anchor
为了认识这个属性, 我们需要先看一种常见的现象. 即在网页加载中, 图片常常比文字加载更慢, 这样图片加载完成后可能会将文字向下顶. 比如下图演示
2023-12-23 11:27:03
492
原创 CSS滚动捕获 scroll-snap-align
看到align, 就条件反射想到对齐方式, 嗯猜对了. 不过要先看一下若干指定了盒子的, 即盒子snap area和滚动容器的snapport的对齐方式.这个属性是定义在滚动元素上, 而不是滚动容器上。
2023-11-18 10:02:24
710
原创 CSS 滚动捕获 Scroll Snap
CSS滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图A或者图B, 而不能停在A和B的中间.比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为CSS。
2023-11-06 09:05:00
580
原创 CSS 滚动驱动动画 animation-range
TOC/TOC这个属性可同时对和这两种不同时间线驱动的动画起效果!还记得之前在中看到的例子吗,是以元素开始出现为0%, 完全离开滚动容器后为100%. 实际上我们可能需要更多类型的进度, 比如开始出现(0%)和完全出现(100%), 或准备离开(0%)和完全离开(100%). 如下这个时候就需要大放异彩了, 因为它改变的就是动画范围.
2023-10-14 09:21:27
514
原创 CSS 滚动驱动动画 view-timeline (view-timeline-name ❤️ view-timeline-axis )
我们之前在中提到了一个因为绝对定位导致滚动无效的问题, 并使用成功解决了这个问题, 而起到的作用就是指定到底是哪个元素提供与此相似,定义了一个具名的, 通过滚动容器(scroller)中的某个元素(subject)可见性的改变来推动这个时间线. 而就定义在subject上.默认情况, 当subject将要出现在滚动容器时, 时间线进度是0%;当subject刚刚完全离开滚动容器时, 时间线进度是100%
2023-09-24 14:57:48
247
原创 CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )
TOC/TOC。
2023-09-16 11:14:34
533
原创 CSS 滚动驱动动画 scroll()
通过scroll()指定可滚动元素与滚动轴来为容器动画提供一个匿名的通过元素在顶部和底部(或左边和右边)的滚动推进. 并且元素滚动的位置会被转换为百分比, 滚动开始被转化为0%, 滚动结束被转化为100%如果scroll()指定的滚动轴不包含滚动条, 也就是元素在滚动轴的方向不可滚动, 那么timeline的进度为0%
2023-09-03 22:27:23
1232
原创 CSS :nth-child
nth-child 伪类根据元素在同级元素中的位置来匹配元素.TOC/TOC很简单的例子, 来直觉上理解这个伪类的意思
2023-07-22 10:23:25
698
原创 在 VS Code 的 User Snippets 中使用美元符号 $ 失败的问题
加数字被用来作为后续自定义输入的位置, 所以如果我们想要保留。在日常工作里经常会用到一些常用的代码片段, 比如创建一个。文件的初始结构, 所以我会选择在。中创建一个代码片段, 如下。可以发现, 我们代码中的。不见了, 这是因为在。, 就必须转义, 使用。
2023-07-06 21:02:09
356
原创 CSS list-style-position
元素的第一个子元素是块元素, 那么不同的浏览器会有不同的渲染结果.元素渲染在同一行, 但是我实测不是这样, 如下图, 在。这个属性是可以继承的, 所以上面的代码中将其应用到。伪元素不见得都有效, 除非该元素的。的父元素上, 从而使得所有。可以取值如下, 效果如上图。除此之外, 给任意元素添加。版本下, 块元素渲染在。
2023-05-27 09:50:31
239
原创 导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 backdrop-filter
宽高的背景「有一定距离」. 实际上这些每个小背景之间是互相紧密排列的没法强行增加间隔. 所以我们使用径向渐变, 从透明色渐变为白色, 这样不同背景都是以白色互相连接而透明部分互相隔离, 看起来就是点阵式了. 下图是灵魂画手的简笔画说明😅。允许开发者将模糊或色彩偏离等图形效果应用到元素背后的区域. 因为它应用于元素背后所有内容, 因此如果你想要看到效果必须将元素的背景设置部分透明.看完上面代码, 会让人有一点疑惑, 好像很多滤镜都生效了, 但是有两个就是没有生效, 分别是。是添加到前面的元素的。
2023-05-07 16:27:52
473
1
原创 与其焦虑被 AI 取代或猜测前端是否已死, 不如看看 vertical-align 扎实你的基础!!!
设置display值为inline和table-cell的元素竖直对齐方式.
2023-05-01 15:33:52
580
原创 CSS :autofill 如何覆盖浏览器自动填充表单的样式
autofill伪类匹配浏览器自动填充值的input元素. 如果用户继续编辑这个元素内容就会停止匹配.
2023-04-18 09:08:06
825
原创 CSS prefers-color-scheme 与 matchMedia() 深浅色模式
我们只需要写好媒体查询, 然后修改系统的颜色主题, 浏览器的页面就会自动响应变化, 不需要人工干预哦~变量, 不然一个颜色如果在很多地方都用到就需要写很多次修改起来也很麻烦。的设置-通用中, 可以选择设置系统的主题为浅色, 深色或自动。当然, 如果想要想要同时对多个媒体查询的结果匹配, 可以使用。首先来看一个例子. 首先我们获得匹配结果, 然后通过注册。对这个媒体查询的匹配结果, 进而做出一些处理.是否匹配对应的媒体查询并返回一个。对象. 通过返回对象, 可以检测。欢迎进群讨论前端工作与生活。
2023-04-08 09:44:19
687
原创 JS 面试问题: 手写 new
操作符可以创建一个用户自定义的对象类型或者创建一个带有构造函数的内置对象类型.方式调用时, 这个函数被当作一个构造函数.有了上面的介绍, 就可以开始写代码了。
2023-03-31 21:18:20
256
原创 Mac 使用 n 进行 Node 版本管理
好了, 有了两个版本, 才真正满足了版本管理的条件, 接下来可以只使用命令。的缓存. 为什么需要清除缓存以及缓存都包含哪些内容, 我们来看一下选手。版本了. (📖: 如果切换失败, 记得加上。是在官网下载安装的, 所以如果我要使用。进行版本管理之前, 我们需要强制清理。是 Node.js 的版本管理工具。所有版本. 使用上下键控制选择,进行版本管理, 我就需要使用。删除, 回车使用对应的版本.的方式了, 首先查看所有。版本太多了, 只截取了部分。接下来, 我们再安装一下。
2023-03-25 11:09:34
918
原创 JS 面试问题: 手写 apply/call/bind ️♀️
这是比较经典的面试题, 要明白考点就是函数调用时this究竟是谁的问题, 明白了这点一切就好说了.
2023-03-18 09:58:14
347
原创 CSS 重新认识 !important 肯定有你不知道的
如果将!important添加到CSS变量声明中, 只有赋值时!important才起作用. 也就是将pink复制给变量时起了作用, 因为如果没有!important的值应该是skyblue赋值之后!important就从自定义属性上「脱落」了, 使用var()函数时并不会传递!important.box8 {从下图就可以看出,.box8的背景色是red, 因为关于背景色的两条CSS声明都是一般声明.
2023-02-11 11:12:17
9324
原创 使用 transform 实现的 hover 动效 3
在写效果的过程中, 一定要注意使用。调整元素初始的位置, 然后通过。实现动画. 另外复习。
2023-01-29 09:15:11
298
5
原创 使用 transform-origin 实现的 hover 动效 2
思路还是挺简单的, 一般要实现关于边框的效果都是在底层元素设置颜色, 在上层元素遮挡中间部分并且露出边框部分即可, 这个例子也不例外.另外就是标题上写的使用 transform-origin, 因为两个边框分别是从「左下角」和「右上角」出现的.两个边框都是使用伪元素实现的。
2023-01-16 09:14:53
98
原创 使用 transform-origin 实现的 hover 动效
时蓝色线条消失并从左向右消失, 所以变换的原点就是元素的。时, 我们希望蓝色线条出现并且从左侧出现, 也就是。然后思考如果让其从左边出现, 右边消失?, 也就是从中间出现然后向两边扩散, 如下图.首先就是思考蓝色线是如何出来的?伪元素, 我们希望没有。然后, 蓝色线其实是。
2023-01-07 10:16:22
155
原创 图文排版 之 line-height
设置. 结果就是百分数乘以元素自身计算出来的字体大小, 百分比也可能带来意想不到的效果., 这样可以提高用户在低可视条件下的阅读体验, 同时帮助有阅读困难的用户.3️⃣想要实现类似圆形文字头像的效果, 如果想要通过设置四边相等的。有多少取决于浏览器的实现, 包括火狐浏览器在内的桌面浏览器使用。糟糕的事情出现了, 文字挤在了一起, 这是因为子元素设置的。的高度默认是由其子元素撑起的, 但是负责撑起的却不是。制定了行盒子的最小高度. 对于非替换的内联元素,的方式, 可以避免因为继承而出现的奇怪结果.
2022-12-17 21:07:46
495
原创 学习正则前的预备 charCodeAt
在解析字符串的过程中每次读两个字节, 如果读到的两个字节恰好在基本平面内, 那么就会继读下面两个字节, 把四个字节放在一起解析. 如果读到的两个字节不在基础平面内, 那就直接解析这两个字节.是基本平面内的字符, 因此如果字符串内存在非基本平面内的字符, 需要小心使用。的数量来返回长度, 因为 😊 并非基础平面字符, 所以使用 2 个。从上面的介绍中就可以看出来, 对于非基本平面内的字符, 使用。的背景我简单介绍一下, 介绍的内容在阮老师的博客中都有., 它使用 2 个字节或者是 4 个字节编码.
2022-11-05 08:58:58
422
原创 文本的换行与包裹 之我都忘了我写过 break-word
从图片中可以看出, 两个属性对中文没有影响, 表现一致. 只有英文时, 首先。这个已被弃用的属性吧. 前面说过这个属性的效果与。时考虑到了软换行机会所以任何地方都可以换行, 而。如果在新的一行显示完全不用换行, 但是。就算放在新的一行显示还是会断行, 但是。的值是什么. 有趣的在后半句, 因为。时不考虑软换行, 因此表现与预期相似。共同作用效果相同, 而不论。还是在原行显示. 其次,其实上面总结一下就是,还是将其放在新的一行.指定如何在单词内断行。
2022-10-27 21:36:17
249
原创 文本的换行与包裹 之很懒不想更新的 overflow-wrap
当一个不可分割的字符串太长要溢出其行盒子时, 这个属性设置是否允许在字符串中换行。时考虑软换行的意思就是每个中文、每个英文字母、每个标点符号能断就断, 而。从上图还是可以比较清楚地看出, 两者的不同是处理在标点符号左右的软换行.和我们认知的计算规则比较相似, 而且像逗号(📕原本这个属性是一个非标准的微软私有属性叫。不会在表达符号左右的软换行处换行, 而。生效的前提是浏览器允许换行, 如果使用。)这样的避首标点也没有出现在一行的开头.
2022-10-16 22:43:41
351
Image Fusion with Local Spectral Consistency and Dynamic Gradient Sparsity
2018-03-22
跪求有向无环图所有可能的拓扑排序结果。感谢。
2017-05-17
关于斐波那契的问题.....
2017-02-19
关于函数stew的求助？？
2016-10-15
为什么最外层的for循环不执行呢？
2016-10-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人