前端-css相关
记录/分享css相关的知识/文章/心得体会
pzy_666
风会指引你前进的方向
展开
-
父元素设置了min-height, 子元素设置height:100%无效
参考文章关于父元素设置min-height,子元素设置 height 100% 不生效的问题css 父元素设置了min-height:100%, 子元素设置height:100%无效原创 2022-02-21 16:52:53 · 1544 阅读 · 0 评论 -
前端动效资源
网站Ant motionhttps://motion.ant.design/exhibition-cn/通用小动画https://webkul.github.io/micron/按钮小动画https://bttn.surge.sh/https://varin6.github.io/Hover-Buttons/实现颜色渐变动画https://sarcadass.github.io/granim.js/examples.html实现颜色渐变动画实现线条的动画https://kim原创 2022-02-21 07:30:36 · 245 阅读 · 0 评论 -
css布局网站网站记录
Flexbox GeneratorCSS LayoutCSS Grid Generatorcssgr.id原创 2022-02-17 22:32:07 · 188 阅读 · 0 评论 -
配置stylelint
文章目录安装依赖新建配置文件`package.json`加入stylelint相关配置webstorm配置stylelint忽略stylelint对css的检验参考安装依赖npm install -D stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier postcss-less postcss-scss postcss-html s原创 2022-02-13 23:53:08 · 1838 阅读 · 0 评论 -
z-index 无效问题
情景说明今天有个弹窗组件,弹窗中有个下拉组件,但这个下拉组件下拉开之后,多出的部分,被弹窗组件盖住了z-index无效的几种情况和解决方案父元素设置了 overflow:hidden|auto /display:none/如果父元素设置了 overflow:hidden /display:none/ 等,那么子元素如果在父元素外部绝对定位,那么调节子元素 z-index 可能不会显示。.father { display: none; opacity: 0; overflow: hidd原创 2022-02-11 19:16:15 · 949 阅读 · 1 评论 -
常用mixin
修复浮动导致的高度坍塌问题@mixin clearfix { &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: hidden; } *height: 1%;}单行文本超长显示省略号@mixin textOverflow($width:100%,$display:block) { max-width原创 2022-02-10 14:27:23 · 332 阅读 · 0 评论 -
css同时满足两个类名才有效果的写法
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><style type="text/css"> .item-1.red{color: red;}</style></hea原创 2022-02-10 14:24:27 · 5118 阅读 · 0 评论