CSS/SASS/SCSS/Styled-Component
CSS/SASS/SCSS/Styled-Component 样式相关
Ranye123
这个作者很懒,什么都没留下…
展开
-
知识点查漏补缺
1. `` 加载 css 的,不会阻塞 DOM 树解析,`` 加载 js 的会2. js 事件循环3. 浏览器缓存4. redux vs context:redux大型项目,context中小型5. redux三大原则:单一数据源,State 只原创 2023-07-25 21:31:09 · 104 阅读 · 0 评论 -
已知父width和子margin如何设置子元素的width
但是好像不显式设置也没关系,子元素的 width 在渲染时会自动设置成相同的结果。原创 2023-01-04 13:59:49 · 63 阅读 · 0 评论 -
scss 优化与 css 不同的地方
的使用,因为 scss 会生成 css,在这个时候就已经把要 import 进来的代码块导入进来了。,因为这意味着在渲染时还要去获取(下载)另一个 css,导致页面阻塞。之前有看到过,css 尽量不要使用。但是 scss 中不用避免。原创 2022-11-17 11:58:59 · 132 阅读 · 0 评论 -
用 contain: paint 代替 overflow: hidden 进行性能优化
contain: paint 直接不渲染超出的部分。overflow: hidden 渲染了只是不显示。所以 contain: paint 性能高好多。原创 2022-10-18 10:45:54 · 276 阅读 · 0 评论 -
SVG动画
SVG in HTMLSVG 形状polyline 折线 端点坐标集合,例:“0 0, 0 1, 1 1, 1 0” 线转角处的衔接方法,arcs | bevel |miter | miter-clip | round 线两端的形状,butt | round | square | inherit 划线与间隔 虚线的偏移量linex1y1x2y2pathpolygon 多边形 拐点坐标,例:“0 0, 0 1, 1 1, 1 0”rect 左上角 x 左上原创 2022-09-13 11:10:40 · 79 阅读 · 0 评论 -
用CSS实现圆环倒计时
css + svg原创 2022-09-03 10:29:18 · 1734 阅读 · 0 评论 -
BEM命名法
BEM(Blocks, Elements and Modifiers 块,元素和修饰符),是一种 CSS 类命名规范。原创 2022-08-06 11:02:52 · 94 阅读 · 0 评论 -
React 动画与坑
React管理动画播放时间主要通过SCSS变更className实现。比如,原本className为,当className变为时,会将style.ani1里的样式加入到中,如果style.ani1里碰巧有这样的样式,自然动画效果就在此时开始执行了。在scss文件中的写法是这样的这种方式虽然好用,却有许多的坑,需要着重避开。...原创 2022-07-29 18:25:40 · 424 阅读 · 0 评论 -
Scss初步探索
SCSS (Syntactically Awesome StyleSheets) 是什么在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能变量SCSS 变量支持块级作用域,以$开头SCSS 变量有 6 种类型:数字,1, 2, 13, 10px字符串,有引号字符串与无引号字符串。!important 声明等一律看作无引号字符串颜色,blue, #04a原创 2022-05-30 18:10:08 · 178 阅读 · 0 评论