YolkPie

行高“行高”，顾名思义是指的一行文字的高度，按照我们的理解,行高指的应该是两行文字间基线的距离。vertical-align中有top,middle,baseline,bottom与之是由关联的。但是由于中英文的差异，所以基线在中文中可能并不适用，实际表现不符合预期 行高的作用CSS中起高度作用的除了我们熟知的height，另外line-height在css中也起了高度的作用，如果一个标签未定义高度（包括百分比高度），那么最终表现的高度一定是由line-height起作用的。 之前，在我的认知中，若不设置高度，父盒子的高度应该是由内层文字撑起来的，但是是不是这样呢? 我们来看一个实验： 123456789101112131415161718<div class="test1">测试</div><div class="test2">测试</div>.test1 { font-size: 20px; line-height: 0; border:1px solid #cccccc; ...

例子首先看个具体的例子： 12345678910111213141516171819<style> .parent { width: 250px; background: lightgray; } .child { display: inline-block; width: 100px; height: 100px; background: cornflowerblue; }</style><div class="parent"> <div class="child"></div> <div class="child"></div></div> 上面的代码中定义了一个父元素，里面包含了两个 inline-block 的子元素，效果如下： 有没有发现，我们没有定义父元素的高 ...

一个进度条优化的例子 功能很简单：实现一个类似抖音视频下放的播放进度条, 进度条随着视频的长度而进行增长，视频暂停，进度条的动画也会随之暂停 接下来看看大部分人是怎么写的，为什么说思路和性能不好。 以react为例主要实现功能： 支持播放、暂停、重播 播放结束后，播放次数+1，并重新开始播放 不推荐的写法组件部分 123456789101112131415161718192021222324252627282930313233343536373839404142434445import { useState } from 'react'import './index.css'let timer = null // 递增进度的定时器let totalTime = 3000 // 假设视频播放为3sfunction App() { const [progress, setProgress] = useState(0) // 进度 const [isPlay, setIsPlay] = useSt ...

NPX的主要作用调用项目安装的模块npx主要解决的问题： 调用项目内部安装的模块; 如测试工具 Mocha 12345678$ npm install -D mocha# 未使用npx 项目的根目录下执行$ node-modules/.bin/mocha --version# 使用npx 就方便多了$ npx mocha --version npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量$PATH里面，检查命令是否存在。 由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。 12# 等同于 ls$ npx ls 注意，Bash 内置的命令不在$PATH里面，所以不能用。比如，cd是 Bash 命令，因此就不能用npx cd 避免全局安装模块123456789101112131415# npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app$ npx create-react-app my-react-app# 安装指定版本 $ npx ...

基础功能点 视图窗口中物体的旋转、缩放和位移 物体旋转：Alt+鼠标左键 物体缩放：Alt+鼠标右键 物体推拉：Alt+鼠标滚轮（中键） 三维空间中的坐标系称为笛卡尔坐标系； 基础快捷键 旋转：快捷键R、缩放：快捷键T、位移：快捷键E、快速找到当前物体：快捷键H&S、物体复制：command+鼠标左键往下拖动、物体和世界切换：快捷键W、场景的四视图：鼠标中键、图层群组：alt+g（或者全选右击-群租对象）关闭当前预置：ctrl+F4 找到当前C4D文件：窗口右下角（可直接切换多个文件） 关闭当前文件：窗口左上角文件–关闭（全部关闭） 合并两个文件：在其中一个文件下，点击左上角文件–合并–选择你想要合并的文件 等比旋转：先点击R调出旋转命令，把鼠标放在你想要旋转的轴上（此时你想旋转的轴将会点亮），右手按住鼠标左键不放，左手按住shift旋转。 物体的可编辑：快捷键C(物体转换为可编辑对象是不可逆的，物体转换为可编辑对象以后可以激活右键中的属性） 循环选择线：上方菜单栏–循环选择或用移动工具在循环线上双击 所有C4D中绿色的图标都是包含级关系（即需要把你所想要做效 ...

什么是辅助图形？辅助图形也称为辅助图案，是VI系统中不可或缺的一部分。它可以弥补品牌宣传过程中基本要素的设计运用不足，尤其在当今线上线下多端的传播媒介中既可以丰富整体内容又能强化企业形象。 品牌辅助图形犹如公司的第二张脸，它能强化企业识别系统的诉求力，抓住受众的视线，引起人们的兴趣，能增加设计要素的适应性，使所有的设计要素更加具有设计表现力，更明确地传递企业特征。 辅助图形不是纯装饰的图案，辅助图形的出发点就是要处理好其它要素的组合形式与应用环境的关系，进一步深化品牌传播核心要素的含义。 品牌辅助图形能够更好地配合企业标志，当标志不方便突出展示的时候，由辅助图形加强展示，能起到对比、陪衬企业标志的作用，使标志、标准字体的意义更具完整性，易于识别，同时可增加其它要素在应用中的柔软度与适应性，增加韵律，强化视觉冲击力和美感，最大限度地创造视觉诱导效果，增强审美趣味。 在这个信息迅猛爆炸的年代，每一个企业都意识到辅助图形牵引出的形象力量，它在标志的基础部分与标志的地位几乎是相等的，甚至有些时候，比起logo，简单和抽象的辅助图形可以更快更好地与人建立关系，并让视觉效果充满感染力。 辅助图形 ...

什么是深色模式深色模式（也有人叫暗黑模式）确实不是人机界面领域的新概念了。曾几何时，绿色字符呈现在漆黑屏幕上的模式就是我们所拥有的全部。如今的屏幕色彩越来越丰富，但深色模式依然存在，到底为什么呢？ 从使用场景上来说，深色模式是区别于夜间模式的； 深色模式对浅色主题的一种场景化补充，是满足用户日间的使用需求，让使用者更加专注自己的操作任务，带来视觉沉浸感；所以深色模式在信息内容的表达上会更注重视觉性； 同时，设置深色模式，会降低设备屏幕发出的亮度，目前的中高端手机大多采用OLED屏幕，这一材质自发光的特性使得屏幕能够独立控制单个像素是否发光，深色主题会降低设备屏幕发出的亮度，同时仍能满足最低色彩对比度。 而传统的夜间模式更注重于弱光场景下的体验。是从用户的健康角度出发考虑的，当用户舒服的躺在被窝里，或关灯玩手机时，通过降低屏幕亮度和对比度，不会过于刺眼，以达到帮助保护眼睛的效果。夜间模式在亮光环境使用时很可能并不保证所有信息都具有可读性。 深色模式的优点优点一：提升视觉沉浸感；让使用者更加专注自己的操作和界面内容。 优点二：减少屏幕明度；缩小屏幕显示内容与环境光强度的差距，减少眼睛的负 ...

纯函数晦涩的定义是这样的：一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用; 总共2点： 结果只依赖参数 执行过程中没有副作用 123456789101112131415161718192021222324252627282930313233343536373839// demo1const a = 1const foo = (b) => a + bfoo(2) // => 3// demo2const a = 1const foo = (x, b) => x + bfoo(1, 2) // => 3// demo3const a = 1const foo = (obj, b) => { return obj.x + b}const counter = { x: 1 }foo(counter, 2) // => 3counter.x // => 1// demo4 const a = 1const foo = (obj, b) => { obj.x = 2 r ...

在很多项目总结中，我们几乎都能看到情绪板的运用，精美的图片搭配符合主题的关键词，可以向需求方和产品侧准确地表达出页面的设计方向和风格。那什么是情绪版呢，我们又该怎么建立情绪版呢，以下是我写的一点点总结。 什么是情绪板？情绪板定义 情绪板（Mood Board），主要是对设计的产品和相关主题方向的色彩、图片、影像或其他材料的收集，从而引起某些情绪反应，以此作为设计方向或者形式的参考，是常用的表达设计定义和方向的设计方法论。帮助设计师明确视觉设计需求，用于提取配色方案、视觉风格、质感材质，以指导视觉设计，为设计师提供灵感。 情绪板的作用情绪板首先能组织整个项目的灵感，保持风格和美学的一致性，并与客户的目标和期望保持一致。 情绪板是在开始实际设计前确定和完善产品风格的好方法。在资源和时间方面，情绪版比模型或原型的成本要低得多，并且能直接传达出关于最终设计风格的信息。 对设计师来说：情绪板是定义视觉风格和指导设计方向的依据；对团队：在团队之间传递设计灵感与设计思路，从而使想法充分融合，深化设计。情绪板能够巧妙地向客户传达设计理念。例如当设计师在说扁平化或极简等设计风格时，客户或者我们的产品可 ...

微前端架构之single-spasingle-spa是什么Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。好处： 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, 你正在使用的框架) 独立部署每一个单页面应用 新功能使用新框架，旧的单页应用不用重写可以共存 改善初始加载时间，迟加载代码 single-spa做了什么single-spa是一个顶层路由。当路由处于活动状态时，它将下载并执行该路由下的相关代码。 路由的代码被称为应用，每个代码都可以（可选）拥有自己的git仓库、CI进程，并且可以独立部署。这些应用即可以用相同框架实现，也可以用不同框架实现。 single-spa包括些什么: 1、Applications，每个应用程序本身就是一个完整的 SPA (某种程度上)。 每个应用程序都可以响应 url 路由事件，并且必须知道如何从 DOM 中初始化、挂载和卸载自己。 传统 SPA 应用程序和 Single SPA 应用程序的主要区别在于，它们必须能够与其他应用程序共 ...