随笔分类 - CSS
CSS的一些知识
摘要：https://better-scroll.github.io/docs/zh-CN/guide
阅读全文
摘要：转自：https://blog.csdn.net/qq_32429257/article/details/122339194 注：也可以用vant的组件 TextEllipsis 文本省略 https://vant-contrib.gitee.io/vant/#/zh-CN/text-ellipsi
阅读全文
摘要：###标准化浏览器样式差异 项目引入normalize.css，（引入顺序根据优先级从小到大-->从上往下） https://gitcode.net/mirrors/necolas/normalize.css?utm_source=csdn_github_accelerator ###标准化富文本样
阅读全文
摘要：###https://juejin.cn/post/7031432455357743140 ###https://juejin.cn/post/6844903705540558856
阅读全文
摘要：https://www.jianshu.com/p/f82e06abc10e/
阅读全文
摘要：https://blog.csdn.net/qq_45037155/article/details/128465166
阅读全文
摘要：###注意：使用此方式会使页面比例缩放，所以会导致一些依附于页面比例的功能失效，并且产生一些奇怪的Bug。请勿轻易使用 ##示例图 ##示例代码 //zoom样式设置可以放在任何元素上，不是必须放在app根元素上 <div id="app" :style="`zoom:${scaleRadio}`"
阅读全文
摘要：####转自：https://blog.csdn.net/a1056244734/article/details/121593952 并优化部分代码 ###16进制转rgb hexToRgb(hexStr){ //十六进制颜色值的正则表达式 let reg = /^#([0-9a-fA-f]{3}|
阅读全文
摘要：##原理：定义一个名为 "XXX" 的样式/属性，然后使用css的 var() 函数调用该样式/属性 ##基础代码示例 //定义样式/属性：格式必须以--开头，如--XXX :root { --main-color: #000; //主色 --sub-color: #ccc; //副色 } //使用
阅读全文
摘要：##方式一 <div class="content"> <div class="bg_img"> <img src="../../img/bg.png" /> </div> </div> .content { position: fixed; //关键是设置fixed定位，设置后即可通过height
阅读全文
摘要：##animate.css 动画库 介绍：Animate.css 是最早的也是目前最流行和最易于使用的CSS动画库之一，其包含了60多款不同类型的 CSS 动画如晃动、闪动、淡出淡出效果等，如果你想快速的使用各种 CSS 动画特效的话，你可以选择它。 演示地址：https://daneden.git
阅读全文
摘要：####兼容方式（仅适用于移动端，pc端对ie浏览器兼容不友好） IE：不管该行有没有文字，光标高度与font-size大小一致 FF：该行没有文字时，光标大小与input的 height 大小一致；该行有文字时，光标大小与font-size大小一致 chrome：有2种情况，①设置了line-he
阅读全文
摘要：三级级联选择，如图所示 思路：ul里面包li再包ul再包li再包ul再包li html代码 css
阅读全文
摘要：背景图片 calc的使用 span标签里文字换行，但数字字母不自动换行 字体描边 字体间距 字体两边对齐 首行缩进 关于:nth child() 选择器 包裹图片的父级盒子边缘多出一部分（或者说图片本身自带空隙怎么解决） 下划线 li的点 关于flex:1和flex:auto的区别（IE8 不支持f
阅读全文
摘要：####滚动条距离顶部的距离 let ele=document.getElementById("demo") console.log(ele.scrollTop) ####滚动条距离底部的距离 let ele=document.getElementById("demo") console.log(e
阅读全文
摘要：######单行文字省略： text-overflow: ellipsis; overflow: hidden; white-space: nowrap; ######多行文字省略： display: -webkit-box; -webkit-line-clamp: 2; //设定行数 /* ! a
阅读全文
摘要：<style> #triangle{ width:0; height:0; border-width: 100px; border-style: solid; border-color: transparent blue transparent transparent; } </style> <di
阅读全文
摘要：less——css预处理器 引入 `` `` // css名改less // 引这句代码(写在head里) 引用 在一个less里引用另一个less 编译 编译转换：less == css 编译工具 koala：http://koala app.com/ 定义变量 @ 延迟加载，作用域 作用域：一个
阅读全文
