Intact

Appearance

CSS ​

长度单位

  • 分为绝对长度单位和相对长度单位
  • em rem px % vh vw；ch ex ...看文档

怎么画0.5px

  • box-shadow阴影实现
  • ::after定位伪类实现
  • transform 缩放实现
  • border-image: linear-gradient 边框线性渐变

权重 ​

	!important 
	inline-style
	ID
	class
	property
	element

antd ​

Button的loading属性，在登录 && 后端运算时对用户更加友好
React Hook Form，表单处理，登录与注册适用

tailwind ​

Utility-First的优点

通过组合原子类来构建UI，避免了传统CSS的冗余代码

缺点：

  • 基于原子设置样式——复用性差
  • HTML与CSS的耦合
  • 做定制效果 && 定位不方便，粒度不如scss

属性：

break-keep

classnames ​

两种写法

              <div
                className={classNames(
                  'flex-1 flex items-center h-full w-0 truncate ',
                  {
                    'hover:text-primary': !isFailed,
                  },
                )}
                onClick={...}
              >
              <div
                className={classNames(
                  'flex-1 flex items-center h-full w-0 truncate ',
                  !isFailed && 'hover:text-primaryl',
                )}
                onClick={...}
              >

bfc ​

css 中 bfc了解吗 说一下是什么 有什么应用场景

BFC：关于块级元素布局，除了解决浮动相关的问题，其它方面极大概率用不到

常用效果 ​

顶吸效果 ​

吸顶的效果是怎么实现的？如果需要你原生实现呢？

基于fixed，设置top：0

原生实现：基于scroll滚动设置offset

hover展开 ​

如何实现hover展开的效果？

逐层分解
	1. 核心事件：鼠标进入 && 移出事件
	2. 核心动画：height高度变化

原理(重绘)
	1. container设置overflow hidden
	2. hover时改变父级容器的高度 && 展开对象设置opacity && cursor pointer

原理(重排)
	1. container设置overflow hidden
	2. 展开对象默认设置为display: none
    3. hover时设置展开对象display: block

单方向旋转 ​

1. 单次旋转，只需要transform rotate
2. 多次旋转，效果相同，需要设置animation

可视化 ​

Echarts && D3 && AntV之间的选择？

总结：

  • 快速演示 && Demo：Echarts
  • 中小项目：Echarts && AntV
  • 长期使用 && 大项目：D3 && AntV

渲染方式上：

  • canvas：Echarts
  • SVG：D3 && AntV

Echarts ​

  • 优点
    • 丰富的图表类型
    • 易用性强，配置简单
    • 社区活跃，文档丰富
    • 支持响应式设计
  • 缺点
    • 自定义复杂图表时可能受限
    • 基于 Canvas，性能有时不如 SVG

D3.js ​

  • 优点
    • 高度灵活，完全控制 DOM 元素
    • 基于 SVG，适合大规模数据可视化
    • 强大的数据绑定和动画效果
  • 缺点
    • 学习曲线陡峭
    • 需要更多的手工编码
    • 项目复杂度高时，开发和维护成本较高

AntV ​

  • 优点
    • 基于 G2 图表库，功能强大
    • 易用性和灵活性兼具
    • 支持多种图表和复杂的交互
    • 丰富的文档和示例
  • 缺点
    • 社区活跃度不如 Echarts 和 D3
    • 部分高级功能需要学习成本

Last updated: