css
雨中的风铃子
这个作者很懒,什么都没留下…
展开
-
利用锚点,点击滚动到指定元素示例
html中锚点的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #control { position: fixed; left: 310px; width: 100px; height: 65px; background-color:原创 2021-07-22 17:40:56 · 168 阅读 · 0 评论 -
css如何与dom通过js变量通信?
目标:在dom中设置变量,然后css文件直接获取.vue文件<div style="--color: red">测试颜色</div>原创 2021-06-11 16:47:58 · 164 阅读 · 0 评论 -
css设置谷歌浏览器滚动条样式
复制代码/*css主要部分的样式*//*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {width: 10px; /*对垂直流动条有效*/height: 10px; /*对水平流动条有效*/}/*定义滚动条的轨道颜色、内阴影及圆角*/::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: rosybrown.原创 2021-06-08 11:50:19 · 546 阅读 · 0 评论 -
如何一次性导入某个文件夹下方所有的文件,并导出
导入当前文件夹下方所有的css文件,并导出const modulesFiles = require.context('./', true, /\.css$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') const value = modulesFiles(m.原创 2021-04-12 14:40:02 · 726 阅读 · 0 评论 -
deep导致样式失效?
背景:最近谷歌升级到89.几的版本后,项目中有些样式失效了出现场景解析:1. 全局样式:加了/deep/后的样式会失效 =》实际上,全局样式,根本不需要使用deep来做样式穿透,全局样式只有优先级的问题,没有拿不到的问题2.局部样式:/deep/嵌套使用,会导致样式失效// 这就是局部嵌套使用(scoped),会导致.c的样式失效<style lang="scss" scoped>.a /deep/ .b { ...... /deep/ .c { ...原创 2021-03-04 13:52:16 · 1081 阅读 · 2 评论 -
如何用element里的table通过单元格的拆分合并渲染出树结构?
背景:通常后端是把所有数据(包含父级和子级)通过一个数组扁平化(以子级为维度)给我们,然后前端再去根据一定的条件进行单元格拆分合并,正常这样是没有问题的,但当遇到分页时,就会存在部分数据在上一页和部分数据在下一页的问题,现在我们换个角度,让后端以树形结构(以父级为维度)把数据传给我们呢?那就可以完美解决这个问题,请继续往下看:解决:.vue文件<template> <el-table :data="tableData" border :sp原创 2021-03-01 14:41:32 · 4053 阅读 · 7 评论 -
从输入url到页面加载发生了什么?
1.DNS解析(将网址解析为IP地址)首先看DNS缓存,查询顺序为:浏览器、操作系统;若都没有,则进行分级查询,查询顺序为:本地DNS服务器,根域名服务器,COM顶级域名服务器,google.com域名服务器2. TCP连接(三次握手).md的生成下图的文本部分:```sequence客户端->服务端:第一次握手(客户端具有发送信息的能力):SYN=1(请求建立连接),seq=n(序列号)服务端->客户端:第二次握手(服务端具有接受信息和发送信息的能力):SYN=原创 2021-02-24 13:55:25 · 121 阅读 · 0 评论 -
什么是css Hack和浏览器bug?
简单的说,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决。css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着有更好的解决办法。浏览器bug修复:针对浏览器本身的bug,使用css自有的属性,进行浏览器显示问题的修复...原创 2021-02-24 10:33:23 · 122 阅读 · 0 评论 -
页面一次性加载数据过多时,页面卡死怎么办
问题:当后端一次性返回数据(array)过多时(例如1000条或者更多),会导致页面卡顿优化思路:将这1000条数据划分为多个小数组,然后一段一段的加到页面上解决方案:利用window.requestAnimationFrame()或者setInterval()示例:以window.requestAnimationFrame()为例window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要.原创 2020-09-16 09:35:00 · 10588 阅读 · 2 评论 -
css如何实现文字两行后,自动省略号显示?
1. 多行超出显示省略号(只适用于WebKit内核的浏览器,因此firebox、ie等并不支持该属性)文字容器class { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; // 2行}2. 通用浏览器做法:比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模.翻译 2020-06-01 17:46:57 · 2156 阅读 · 0 评论