随笔分类 - CSS
摘要：### 问题引出 需求：例如我想要在某一个ul元素中使用v-if条件时渲染 2 个li元素， 同时第一个和第二个的样式不同，这里我使用了nth-of-type选择器去设置样式， 但是当v-if条件改变时，li元素的样式没有改变，看了下开发者工具，元素对应的选择器 没有改变，即使此时仅剩第二个li元素
阅读全文
摘要：#### 1. 什么是节流（throttle）和防抖（debounce） 1. 概念 - **节流**（throttle）：是函数在一定时间内，不管调用了多少次，实际只会在最后的时候执行一次 - **防抖**（debounce）：是函数在一定时间内，每次调用，都会重置倒计时，直到规定时间内没有再次调
阅读全文
摘要：1. 先看效果 2. 默认是关闭的，并且父级关闭后，子级的开关状态会被保留，再次展开时，可恢复； 3. 需要对details元素增加一个padding-left或margin-left，否则展开后，子级和父级是左对齐的，视觉效果不好； 4. 一般是details元素套一个summary元素和一个展开
阅读全文
摘要：本文转自掘金文章：为什么我写的z-index无效？，作者小蝉儿 1. 首先总结一下，什么是CSS层叠上下文？ 层叠上下文是HTML元素的三维概念，可以想象为一条垂直于视窗的z轴 当元素创建了重叠上下文时，这个元素就有了一个z轴 如果内部的子元素发生重叠，会依据自身属性优先级顺序占用z轴（重叠上下文）
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：1. 效果（移动端展示，PC端屏幕太宽，tab item数量少滚动不起来） 默认选中第一个 点击话费直充，被激活的item会自动居中 2. 原理 这里我没有使用a标签加 **href="#xxid"**这种形式，因为浏览器地址会带上hash 我使用了scrollIntoView，但是默认元素滚动到视
阅读全文
摘要：// ios底部安全距离-padding .savepadding{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-
阅读全文
摘要：1. 代码 正常情况，两个图片的高度一致，宽度也一致，这时候没有什么问题 <view class="container"> <image class="icon" src="1.png" alt="" /> <image class="icon" src="2.png" alt="" /> </vi
阅读全文
摘要：1. 直接贴代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
阅读全文
摘要：直接贴代码 手机网易新闻网部分适配代码 html { font-size: 13.33333vw } @media screen and (max-width: 320px) { html { font-size:42.667px; font-size: 13.33333vw } } @media
阅读全文
摘要：1. 第一种方式：使用lineTo画直线和quadraticCurveTo（二次贝塞尔曲线）画圆弧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
阅读全文
摘要：<p>这是上面代码的实现<br /> 我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些 <span data-descr="small popups which also hide again">提示
阅读全文
摘要：1. 首先图片需要有一个容器，容器需要有背景颜色，默认是#fff <div class="container"> <img src="xxx.png" alt="" /> </div> 2. 然后指定混合模式和滤镜 .container { background-color: xxx颜色; img
阅读全文
