最近自己在自学vue2.0，然后就自己摸索做一个简单的后台管理系统，在做的过程中，总感觉不同浏览器自带的滚动条样式不统一，也很难看，所以就在网上找一些使用vue的滚动条插件。...先张贴一张效果图： 1.jpg 说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度 下面介绍使用方法： 1、安装vue-happy-scroll 推荐使用npm... 在这里就以我的小项目为例，在dashboard.vue文件中写入如下代码，使用happy-scrool标签就可以使用滚动条了 div> 仪表盘...-- 内层盒子——内容区 --> div class="con"> 士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否...4.1、滚动条颜色：color属性 设置滚动条颜色的属性为color，直接在标签上添加即可，在上面代码中，我已经添加了color属性的值为半透明的黑色滚动条（rgba(0,0,0,0.5)），也可以使用颜色单词
完成左列定宽右列自适应 步骤如下： 左边列开启浮动 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距 实现CSS代码如下： .left { /* 左边列开启浮动 */ float: left...; } .right { /* 通过外边距的方式使该容器的左边有200px */ margin-left: 200px; } 3. absolute+margin-left完成左列定宽右列自适应...> div class="content">内容div> div> 2 左列容器开启左浮动 3 右列容器开启右浮动 4 自适应元素设置overflow会创建一个BFC完成自适应 实现CSS...> div class="content">内容div> div> 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下： .left...使用calc函数实现 实现步骤如下： 通过 calc 函数计算出中间容器的高度。 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。
完成左列定宽右列自适应 步骤如下： 左边列开启浮动 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距 实现CSS代码如下： .left { /* 左边列开启浮动 */ float: left...; } .right { /* 通过外边距的方式使该容器的左边有200px */ margin-left: 200px; } 3. absolute+margin-left完成左列定宽右列自适应...> div class="content">内容div> div> 左列容器开启左浮动 右列容器开启右浮动 自适应元素设置overflow会创建一个BFC完成自适应 实现CSS代码如下...> div class="content">内容div> div> 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下： .left...使用calc函数实现 实现步骤如下： 通过 calc 函数计算出中间容器的高度。 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。
以下以左列宽度固定和右列宽度自适应为例，反之同理。...左列声明固定宽度，右列声明flex:1自适应宽度。...class="right">div> div> 为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算。...在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。...flex实现圣杯布局/双飞翼布局可忽略上述分析，左右两列宽度固定，中间列宽度自适应。
div> div> 最终实现的效果如下： 1. float+calc()函数完成左列定宽右列自适应 步骤如下： (1)....左边列开启浮动； (2). 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。...左列容器开启左浮动； (3). 右列容器开启右浮动； (4). 自适应元素设置overflow会创建一个BFC完成自适应。...左列容器开启左浮动； (3). 右列容器开启右浮动； (4). 使中间自适应的宽度为父级容器减去两个定宽的列。...使用calc函数实现 实现步骤： (1). 通过calc 函数计算出中间容器的高度。 (2). 中间出现滚动条的容器设置overflow: auto，即根据内容自动出现滚动条。
div，默认值是9999 scrollspeed - 滚动速度，默认值为60 mousescrollstep - 高速滚动鼠标滚轮，默认值是40（像素） touchbehavior - 使光标拖动滚动像在台式电脑触摸设备...（默认：false） hwacceleration - 使用硬件加速滚动支持的时候（默认：true） boxzoom - 使变焦框中的内容（默认：false） dblclickzoom - （仅当boxzoom...iframeautoresize，在加载事件AUTORESIZE的iframe（默认：true） cursorminheight，设置在像素的最小光标高度（默认值：20） preservenativescrolling，您可以滚动本机可滚动区域用鼠标...默认：false） spacebarenabled，使向下翻页时，空格键已经按下滚动（默认：true） railpadding，设置填充为铁路吧（默认值：{顶：0，右：0，左：0，下：0}） disableoutline...默认：true） railalign，取向垂直导轨（defaul：“右”） railvalign，对齐水平导轨（defaul：“底部”） enabletranslate3d，nicescroll可以使用
在设计前端页面时，常常会遇到这种情况：可滚动容器的边界并非父容器的边界，导致子元素溢出造成裁切，让页面产生比较怪异的视觉效果（左图） 添加遮罩之后，效果自然了许多（右图） 纯色遮罩 以上图的这种情况举例...，我们需要做的，是在可滚动容器的顶部和底部分别放置一个线性渐变的纯色遮罩，遮挡生硬的裁切线。...所以需要在可滚动容器外部再嵌套一层 relative 定位的元素，使两个遮罩根据其位置定位，最终的结构大概是下面这样的： 可滚动容器之上，需要使用 pointer-events: none; 避免影响滚动操作。 仅适用于父容器为纯色的场景，在父容器有透明度、有背景图案或渐变时，遮罩会露馅。...我们只需要生成一个线性渐变，将其作为可滚动容器的蒙版即可。 使用linear-gradient创建一个多段的线性渐变，得到图中的蒙版效果。
相对定位（Relative） 相对定位使元素相对于其正常位置进行移动。它不会影响文档流中其他元素的布局。...表格布局使用、、等标签定义行和列。...div style="column-count: 3; column-gap: 20px;"> 这是一个多列布局的示例。通过使用CSS的多列布局属性，我们可以将内容分为多个列。...题1：创建一个三栏布局 使用Flexbox创建一个响应式三栏布局，其中左栏和右栏固定宽度，中间栏自适应剩余空间。...: lightcoral;">右栏div> div> 题2：创建一个简单的网格布局 使用Grid布局创建一个三行三列的网格，其中第一行的两个单元格合并为一个单元格，第三行的三个单元格合并为一个单元格
浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。...浏览器的标准文档流可以保证客户端从服务器端所读取的页面元素排列一致，使文档元素接原始设计的顺序显示。...">右列div> div> 图3.1.16 单行两列 （1） 浮动布局实现 设置固定宽度，左列浮于容器的左侧，右列浮于容器右侧，其CSS布局代码如下。...当然，三列布局也相对复杂。它可以使用浮动或层布局实现，且有多种实现方式。...，值要与左列宽度一致*/ padding-right:140px; /*留出右补白显示右列内容，值要与右列宽度一致*/ } #right {/*右列显示属性>*/ position:
div> 此外，要给 table 添加一个 table-layout: fixed; 属性：使列宽由表格宽度和列宽度设定。其他属性参考这篇文章。...也可以使用 统一设置列宽： col 的属性在下面详细介绍。...注意：因为我直接使用的 Bootstrap ，没有出现问题，如果是原生的表格样式出现对不齐的现象，可以尝试把 div 设置为盒模型： .table-box{ box-sizing: border-box...::-webkit-resizer 某些元素的corner部分的部分样式（如：textarea的可拖动按钮） 语法： ::-webkit-scrollbar { styles here } 例子： 直接隐藏滚动条...col 属性拓展： 标签可以为表格中一个或多个列定义属性值。 如需对全部列应用样式，则可以使用 标签，这样就不需要对各个单元和各行重复设置样式了。
以下以左列宽度固定和右列宽度自适应为例，反之同理。...左列声明固定宽度，右列声明flex:1自适应宽度。...class="right">div> div> 复制代码 为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算。...在常规的实现方式中也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。...因此在编写HTML结构时，将中间列节点挪到右列节点后面。
以下以左列宽度固定和右列宽度自适应为例，反之同理。 ?...左列声明固定宽度，右列声明flex:1自适应宽度。...> div class="right">div> div> 为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算...在常规的实现方式中也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。...因此在编写HTML结构时，将中间列节点挪到右列节点后面。
，我在这里同样推荐使用方法渲染的方式，但在有些场景下还是更适合使用自动渲染的方法。...必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 true fixed String 固定列。可选值有：left（固定在左）、right（固定在右）。...一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。...必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 true fixed String 固定列。可选值有：left（固定在左）、right（固定在右）。...一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。
引言 视差滚动（Parallax Scrolling）是一种效果， 能够使不同层次的元素以不同的速度进行滚动， 从而产生了视觉上的深度感和动态效果。...形成的效果称之为 视差滚动 background-attachment 固定背景的位置是使用CSS创建视差效果的最早方法。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中， 然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。...左右10px */ padding:5px 10px 15px; /* 上5px 右10px 下15px 左因为缺省与右相等，则为10px */ padding:5px 10px 15px
多列布局 传统上，创建多列布局需要 JavaScript 来进行动态调整。随着CSS中column属性的出现，我们无需编写脚本即可实现复杂的多列布局。...11.自定义复选框和单选按钮样式 使复选框和单选按钮的样式与特定设计保持一致通常涉及 JavaScript。现在，使用 :checked 伪类和 CSS，我们可以实现自定义样式，而无需编写脚本。...无缝页面转换 创建无缝页面转换通常需要使用 JavaScript 来处理动画。使用滚动行为 CSS 属性，我们无需编写脚本即可实现平滑过渡。...）： body { scroll-behavior: smooth; } 滚动行为属性可以实现平滑滚动，而不需要 JavaScript 事件侦听器。...使用 Flexbox 实现等高列：告别用于均衡列高的 JavaScript，拥抱 CSS Flexbox 的强大功能，实现灵活且统一的布局。
4>使用定位单定位 左盒子设置绝对定位，设置右盒子 margin-left:width(左)，右盒子不必设置宽度。...6>.使用 grid 网格 外层盒子设置 display:grid;grid-template-rows:100px;grid-template-columns:100px auto;设置了一行两列的网格...BFC，左盒子设置右外边距，右盒子设置左外边距(不设置也可)，右盒子不需要设置 width; 三栏布局，已知左右侧宽度，中间自适应 1.使用定位 三个盒子外侧设置大盒子，大盒子使用相对定位，下面一层三个盒子均采用绝对定位...，左盒子固定宽高，右盒子固定宽高并设置right: 0px;使右盒子靠右，中间盒子设置width: calc(100% - width左-width右相加);即可。...圣杯布局 需求： 1.两边固定，中间自适应； 2.先加载 middle 内容； 3.三列等高布局； div id="content"> div id="middle"> middle
左：放入搜索，app bar和固定的tab bar 中：默认的app bar和可滚动的tab bar 右：文字颜色与tab指示器颜色相同 ?...固定标签应该使用有限数量的标签，并且一致的放置将有助于肌肉记忆。 当有许多或可变数量的选项卡时，应使用可滚动的选项卡。 ?...可滚动tabs 可滚动选项卡在任何特定时刻显示选项卡的子集。 它们可以包含更长的选项卡标签和比固定选项卡更多的选项卡。...当用户不需要直接比较选项卡标签时，可滚动选项卡最适合用于浏览触摸界面中的上下文。 要在可滚动选项卡之间导航，请触摸选项卡或向左或向右滑动内容区域。...要在不导航的情况下滚动选项卡，请向左或向右滑动选项卡。 ? 移动端可滚动tabs ? pc端可滚动tabs
像上面这样使用overflow一般情况下是有效的。然而，在某些情况下，这可能会带来一些阴影的截断或是非预期的滚动条。...同时它也使你的CSS变得不那么直观：设置overflow是因为你想要展示滚动条还是仅仅为了获取清除浮动的能力呢？...为了使清除浮动的意图更加直观，并且避免BFC的负面影响，你可以使用flow-root作为display属性的值。...4.4.6 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。...如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
使用行来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间的间隙。...这个类仅适用于直接子列表项 (如果需要移除嵌套的清单项，你需要在嵌套的清单中使用该样式) / .list-inline 将所有列表项放置同一行 / .pre-scrollable 使 元素可滚动...-- 可滚动区域 --> 列的 id 或 class (.navbar)。这样就可以联系上可滚动区域。...注意可滚动项元素上的 id (div id="section1">) 必须匹配巡览列上的链接选项 ()。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
