随笔分类 - css
层叠样式表
摘要：有时需要引入多张背景图，那么css如何设置呢 直接在background-image引入，置顶的图片最先引入，配置的话根据顺序，用逗号隔开 div{ background-color:#CCD8E0 ; background-repeat: repeat-x,repeat; background-p
阅读全文
摘要：问题：如何父元素触发子元素动画 解决：使用伪类后面指定子元素名称来实现动画 下面就是当鼠标移到父元素上时，子元素触发动画 .father:hover .son{ animation: jump .5s infinite; }
阅读全文
摘要：1、需求：需要在css变量中使用sass变量，发现行不通，如下 $bg:red; .theme{ --bg:$bg; } 2、原因：Sass 的语法改变了，较新版本的Sass要求在插值中写入自定义属性值，比如#{} $bg:red; .theme{ --bg:#{$bg}; } 这样就可以
阅读全文
摘要：1、设置字体的间距用的是letter-spacing属性 h1 {letter-spacing:2px} h2 {letter-spacing:-3px} 效果：
阅读全文
摘要：1、问题：父元素使用flex布局，子代元素里使用overflow: hidden;会失效 2、解决 在overflow: hidden;元素的父元素设置min-width: 0; 父元素不能设置flex
阅读全文
摘要：1、通常要弄徽标一般是弄成组件的形式，如果不需要太复杂的功能，那么用伪类实现更加方便 2、实现： 给需要添加徽标的button或者div、view等元素添加自定义属性data-count <div :data-count='count'></div> 然后添加对应的类名，比如：count，之后利用c
阅读全文
摘要：1、问题、需要为checkbox和radio添加一个切换主题的效果，用的原生的，需要不同主题不同颜色 2、思路：修改微信小程序原生样式 3、解决：（注意：样式不生效要确认是不是在自定义的组件里修改样式，如果是的话是因为组件样式隔离造成的，需要在json里面添加"styleIsolation":"sh
阅读全文
摘要：1、问题：接手了一个之前别人的项目，要给一个组件添加主题切换的功能，组件的顶部背景是一张图片（篮框框起来的部分），用了32k空间，当切换主题的时候要更换不同的图片，就当自己是个切图仔了？坚决不切图，咱们用css代替不成吗，不占空间又方便修改颜色 2、思路：这里就用到了clip-path属性，通过cl
阅读全文
摘要：1、单行省略： .text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本省略 .text{ display: -webkit-box; -webkit-box-orient: vertical; -
阅读全文
摘要：1、问题：当一个div设置max-height和overflow: auto;属性时，未达最大高度却出现滚动条 2、原因：当div未达到最大高度时是由子元素撑大的，当子元素和div高度一致时就会出现滚动条 3、解决：添加line-height: normal;就可以了
阅读全文
摘要：1、问题：遇到了设置了justify-content: space-between;中间的div不居中的问题 2、原因： 因为felx布局是根据剩余的空间来设置的，看紫色的那段，当第一个div为空时，会出现左倾 3、解决：三个子项设置flex:1;就好了
阅读全文
摘要：1、Z-index 仅能在定位元素上奏效（position属性值设置除默认值static以外的元素，包括relative，absolute，fixed样式） 2、父标签 position属性为relative position:relative改为position:absolute 3、问题标签含有
阅读全文
摘要：1、思路 首先介绍一下css里的filter(滤镜)属性，filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 就是这个属性来形成我们的毛玻璃，简单来说就是一个div形成页面的大图，div里面的再嵌一个div来放文案或者表单等内容，再用伪类设置filter属性形成毛玻璃
阅读全文
摘要：最近有这么一个需求，要求在特定的页面覆盖一层水印 而且要求不影响用户交互的操作，例如：点击 实现的方式就是一个css属性pointer-events 在水印的css里设置pointer-events: none;再设置一下透明度 就可以透过水印层点击其他触发用户交互了 1、使用方式： 在父级设置po
阅读全文
