随笔分类 -  CSS/CSS3

Grid 布局基础常见场景
摘要：SomeTips CSS Grid Layout 二维布局方案 容器:最外层 项目:只能是容器的顶层子元素 Grid 布局只对项目生效 目前兼容性只有：IE10以上; chrome57以上 经典案例 场景：单元格的栅格矩阵,栅格布局比较合适 <div class="main"> <div class 阅读全文
posted @ 2021-05-14 17:38 Yogic 阅读(628) 评论(0) 推荐(0)
Flex基于sass的@mixin混入在vue中的使用【基础版_一次创建多次引用】
摘要：```/* 自定义封装文件：flexScss.scss *//* @mixin混入,默认center,center，编写公共sass函数 */@mixin flex-justify-align($justify-content:center,$align-items:center){ display: flex; justify-content:$justify-content; ... 阅读全文
posted @ 2020-04-22 15:01 Yogic 阅读(1069) 评论(0) 推荐(1)
sass、less、stylus的模块解析依赖【npm和yarn时同步安装】
摘要：以下包为依赖关系，npm和yarn时需同步安装 sass/scss = sass loader node sass/dart sass (第一个依赖第二个) less/less = less loader less (第一个依赖第二个) stylus/styl = stylus loader sty 阅读全文
posted @ 2020-04-22 14:48 Yogic 阅读(708) 评论(0) 推荐(0)
关于移动端1px问题的解决
摘要：利用= 父元素= 单线不需要倒角= 多线需要倒角= 多线需要倒角= 阅读全文
posted @ 2020-04-22 13:48 Yogic 阅读(494) 评论(0) 推荐(0)
动画总结(一)_css_animate.css
摘要：animate.css【高质量的第三方CSS 动画库】 1. 安装 $ npm install animate.css save 2. 引入 vue cli创建的项目,main.js中 import 'animate.css' 3. 使用【常规的DOM标签】 Example animated是必不可 阅读全文
posted @ 2020-04-22 13:43 Yogic 阅读(319) 评论(0) 推荐(0)
transition效果实现缓慢加载效果
摘要：transition:transition property transition duration transition timing function transition delay 解析：变换属性 变换时长 变换函数 变换开始时间点 常用配置 ： all ms ease 缓慢加载实践方法： 阅读全文
posted @ 2020-03-12 17:32 Yogic 阅读(2015) 评论(0) 推荐(0)
“::before”和“:before”中的双冒号和单冒号的区别
摘要：伪类 伪元素 css3 为了区分伪类和伪元素两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。 你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采 阅读全文
posted @ 2018-05-07 18:03 Yogic
如何实现水平居中和垂直居中
摘要：如何实现水平居中和垂直居中 水平居中：1.父级：text-alingn:center 2.子级：margin: 0 auto; 垂直居中：1.height=line-height 2.position+transform 2.1 >父级不定高：{postion:relative} 子级：{posit 阅读全文
posted @ 2018-05-07 17:47 Yogic