文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

CSS | 视差滚动 | 笔记

在这个示例中，translateZ(-2px) 将 .layer2 层向内移动了 2 个像素单位。 通过在视差滚动中应用不同的 translateZ 值，可以创建层次感和深度效果。...通过调整 perspective 属性的值，可以改变透视效果的强度。 在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height：100% 铺满父容器的高度 height：100vh 铺满屏幕(viewport)的高度 "100vh...vh 是 css 中的一个相对长度单位， 是相对于视窗的高度， 100vh 就是指 元素的高度等于当前浏览器的视窗高度， 即浏览器内部的可视区域的高度大小。...vh 优势在于能够直接获取高度， 而用 % 在没有设置 body 高度的情况下， 是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化， 这使得它几乎毫无用处。

2.8K21
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端面试实录CSS篇（最近一周）

    • 区别： • 伪类操作的对象是文档树种已有的元素或样式 • 伪元素则是创建一个文档树以外的元素或样式 • : 表示伪类 • :: 表示伪元素 • 作用： • 伪类：通过在元素选择器上加入伪类改变元素的状态...垂直方向上，自上而下排列，和文档流的排列方式一致 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4....相对于父元素，rem相对于子元素 • vw/vh: 视图窗口单位，vw 宽度，vh 高度，还有 vmin 和 vmax 两个相关单位 20. px，em, rem 的区别以及使用场景？...与 fixed 的根元素不同，absolute 的根元素可设置，fixed 的根元素是html • 在有滚动的页面中，absolute 会跟随父元素进行滚动，而 fixed 固定在某个位置 27....` 是浏览器滚动的过的距离； `imgs.offsetTop` 是元素顶部距离文档顶部的高度（包括滚动条的距离）； 内容达到显示区域的：`img.offsetTop < window.innerHeight

    59810

    如何通过纯CSS实现网页的平滑滚动背景渐变效果

    背景渐变效果实现原理 在实现平滑滚动背景渐变效果前，我们先了解一下背景渐变的实现原理。CSS中可以通过linear-gradient()函数实现背景渐变效果。...该函数接受一个起始颜色和一个结束颜色，并根据选择的方向和位置进行渐变填充。 平滑滚动背景渐变效果实现步骤 创建一个具有滚动效果的容器。 div class="container"> div> .container { height: 100vh; overflow-y: scroll; } 该容器使用vh单位设置高度为视口高度，并设置 overflow-y...(scrollHeight - windowHeight)) * 100; container.style.backgroundPositionY = `${progress}%`; }); 在滚动事件的回调函数中...，我们获取容器的滚动位置scrollTop、容器的总高度scrollHeight、视口高度windowHeight，并根据滚动进度更新背景渐变的位置。

    1.5K10

    【Html.js——页面布局】水果摆盘（蓝桥杯真题-1767）【合集】

    在需要修改部分的代码有相关提示，请仔细阅读之后，使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码， 把对应的水果放在对应的盘子里面，最终效果如下...（2）主体部分： div id="board">：定义一个容器，作为整个布局的基础。它具有sticky定位，使其在页面滚动时保持固定在顶部。...order: 1;：设置元素在 Flex 容器中的排列顺序为 1。...max-width: 100vh; max-height: 100vh;：设置最大宽度和高度为视口高度的 100%，防止在大屏幕上布局过大。...在#board内部创建#pond和#background容器，分别用于放置青蛙和荷叶。 在#pond中创建多个青蛙元素，在#background中创建多个荷叶元素，并通过类名区分颜色。

    96300

    【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】

    div class="shadow">div>：可能用于添加阴影效果的子元素。 vh;：将 body 的高度设置为视口高度的 100%。 transition: 0.25s;：添加过渡效果，让元素的属性变化更平滑。...：这是 jQuery 的文档就绪函数，等同于 (document).ready(function() {...})，确保在文档的 DOM 结构加载完成后才开始执行其中的代码。...具有 active 类的元素使用 flex-grow 占据更多空间，其他元素占据较少空间。 页面通过 Flex 布局和媒体查询实现了基本的布局和响应式设计。...样式更新： 由于 CSS 中对 .option.active 和 .option:not(.active) 有不同的样式设置，添加 active 类的元素会展开，其宽度、圆角、阴影等样式会更新

    1.8K00

    前端硬核面试专题之 CSS 55 问

    所以设置了 position：absolute，其父类的该属性值要注意，而且 overflow：hidden 也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。...常用于 header，footer 或者一些固定的悬浮 div，随滚动条滚动又稳定又流畅，比 JS 好多了。fixed 可以有很多创造性的布局和作用，兼容性是问题。 position：inherit。...JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。 PNG 的特性 能在保证最不失真的情况下尽可能压缩图像文件的大小。...优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器 jQuery 实现。通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。优点：能兼容到各个版本的，效果可控性好。...---- ::before 和 :after 中双冒号和单冒号有什么区别 ？解释一下这 2 个伪元素的作用 单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。

    2.8K20

    css 文字自适应大小_div自适应窗口大小

    /paintBug.html box的宽度设置为900px，wrap设置为100%(~~这个百分比是相对于viewport的)；缩小浏览器窗口，当宽度小于900时会出现滚动条，向右滚动，会发现蓝色部分并不是...移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流) 4....———– 4. rem + js css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了...vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。...x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀

    4.3K20

    【CSS——效果实现】动态的 Tab 栏（蓝桥杯真题-6180）【合集】

    简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。 本题请实现一个顶栏固定的课程网站首页。...接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果： 目标效果 请在 style.css 文件中补全代码。...当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。...：使页面在不同设备上具有良好的响应式布局，宽度根据设备屏幕宽度自适应...position: sticky; top: 0px：使 Tab 栏在页面滚动时固定在顶部。 .buttons a 样式： 设置 Tab 栏中链接的样式，去除下划线，设置文字颜色和内边距等。

    47200

    【CSS动效实战（纯CSS与JS动效）】02 flex 布局实战（仿 JD 及 gitCode 布局）及 media 自适应初探

    一、flex 仿 JD 布局 首先，我们在编辑器中，写上基础代码，当然要在 style 中加上一个 flex 类，用于 flex 布局的定义，这个是必然需要的，在此一定得加上。 的方向就是 column，竖轴方向，那么此时我们在 style 中添加一个类，直接类名咩咩咩为 column...flex 方向为 column： 随后在 body 之下添加对应的 div 表示头部，但是此时我们需要添加两个 div ，一个用于头部，另一个用于其主要内容区域...： 此时细心的话，你应该可以发现， 30 vh 应该不止这一点高度，这是因为我们 flex 布局可以对当前我们的内容进行伸缩，因为 body 高度就 100vh，多了内容肯定要平均的去分配高度的...： 但是在原本的 gitcode 页面中顶部是一直都存在的，不会拖动内容后顶部栏就消失，那么怎么做呢？

    2K20

    postcss-px-to-viewport之vw、vh、rem

    先知道一下viewport的四个单位，vw、vh、vmax、vmin： vw:1vw 等于视口宽度的1% vh:1vh 等于视口高度的1% vmin: 选取 vw 和 vh 中最小的那个 vmax:选取...vw 和 vh 中最大的那个 这边需要注意的是，vw是视口宽度，是连滚动条都算在内的： div style="width: 100vw;height: 20vh;background: #9dff00...: 80vh;background: #a6a9af">div> 我把视口宽度拉到1000，因为出现滚动条，100vw的宽度是1000px，宽度是100%的则是983px。...所以，用vw、vh的时候，注意要宽度百分百的时候，设置100%，否则底部会出现滚动条。当然，如果是移动端就没关系，移动端的滚动条是滑动的时候才出现，所以移动端的视口宽度就是百分百。...100vw;height: 20vmax;background: #005eff">div> 同样是把视口宽度拉到500，高度是968，20vmin的高度是100px，20vmax的高度是193.594px

    2K30

    【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

    home/project wget https://labfile.oss.aliyuncs.com/courses/9790/01.zip && unzip 01.zip && rm 01.zip 在浏览器中预览...div id="lift">：侧边栏容器，包含三个链接和分隔线。 标签：三个链接，分别绑定了 toFunction 函数，点击时会调用该函数并传入不同的滚动高度参数。...通过 if 语句判断滚动高度所在的范围，确定对应的索引 index。...，添加 active-color 类，同时移除其他链接的 active-color 类，实现链接文字颜色的切换。...获取当前页面的滚动高度，根据滚动高度所在的范围确定对应的索引。 根据索引找到对应的链接，添加 active-color 类，同时移除其他链接的 active-color 类，实现链接文字颜色的切换。

    1.5K00

    我碰到的那些面试题html+css

    这个熟悉了就知道用哪个了，比如有些div悬浮在上方，可能就需要fixed，也就是滚动条移动时不会改变与浏览器的位子， relative可能就要相对于父结点进行定位了一般都是相对定位的*/ 5、浏览器兼容性.../* html5这块尽量不使用html5中新增的一些语义化标签； css方面不要使用css3新增内容 js这块，引用jquery1.0系列版本 针对360浏览器（兼容模式，极速模式） html hack...在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。...容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。 7，浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。...，可以考虑使用em; 5.vh和vw vh和vw 相对于视口的高度和宽度，1vh等于1/100的视口高度，1vw等于1/100 的视口宽度，比如：浏览器高度900px，宽度为750px, 1vh=900px

    1.6K20

    网站自适应布局为什么我要抛弃rem，改用vw？

    简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。...若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function... vw($px) {     @return ($px / 750) * 100vw; } //假设一个div元素在视觉稿中，宽度为120px，字体大小为12px div {     width: vw...百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。...如果你的页面只适用于微信、qq，那绝对能放心使用vw单位，还可以配合vh针对一些特殊比例屏幕做处理，彻底摆脱使用rem带来的副作用，删掉html头部计算font-size的那段js代码，让你的代码更纯粹

    4.2K10

    React 项目实战 | 探索 React 项目中第三方 PDF 查看器虚拟滚动功能：从调研到实践

    引言在我们的项目中，PDF文档的展示是一个比较常见需求。最初，我们的PDF查看器做成了分页展示。但是对于用户而言，尤其是移动端用户，分页没有滚动操作方便，所以我们又做成了滚动查看。...一、PDF查看器技术方案选型1.1 主流PDF查看库对比在React生态中，有多个可用于渲染PDF的第三方库，每个库都有其特点和适用场景：库名称懒加载缩略图移动端适配社区活跃度 ★react-pdf✅❌...动态页面渲染：仅渲染visiblePages集合中的页面非可见区域使用等高的占位元素保持滚动条准确性2. 滚动事件优化：计算当前视口位置及预加载范围使用Set数据结构高效管理可见页码3....important; }}结语通过本文的学习，我们了解了 React 生态中多种 PDF 查看器插件的选择，掌握了 react-pdf 插件的使用方法，学会了如何结合虚拟滚动技术实现大文件的懒加载。...PDF性能优化是前端开发中具有挑战性的任务，需要深入理解浏览器渲染机制和内存管理原理。希望本文能为React复杂文档处理场景提供可复用的技术方案。

    47710

    移动端布局避坑：从 `100vh` 到 `100dvh`

    曾几何时，我们用 height: 100vh 信心满满地实现移动端全屏布局。 但上线后你可能发现——页面一加载就跳，弹出键盘直接遮住输入框，滚动时布局还会“鬼畜”一抖？...vh 的坑：全屏布局不等于全屏体验 vh 是视口高度单位，100vh 表示「当前视口的 100% 高度」。听起来完美？可惜在移动端世界，“当前”并不稳定。...你可能遇到的坑： 页面初始加载时：地址栏展开 → 页面高度较小 ⬆️ 滚动页面：地址栏收起 → 页面变高，内容跳动 ⌨️ 键盘弹出：视口缩小 → 页面溢出，输入框被遮挡 .fullscreen {...为了解决这些布局混乱，CSS 推出了 3 个全新的视口高度单位，它们能更准确地描述真实视图空间： 单位 含义 用途建议 svh Small Viewport Height 初始加载时的最小视口高度 lvh...div> 写在最后： 从 vh 到 dvh，不只是单位变化，而是开发者对真实用户体验的精细掌控。 别再让你的布局在移动端出洋相，是时候更新你的 CSS 知识库了！

    77110
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券