现代 CSS 解决方案:Modern CSS Reset

Normalize.css 为例,它的核心思想是:统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;为大部分元素提供一般化的表现;修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性;通过一些巧妙的细节提升了 CSS 的可用性;提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则;如今,Normalize 已经出到了

- 阅读全文 -

在Canvas中使用React Hooks

在本文中,我将使用React Hooks创建一个html canvas 画图网站,我将使用create-react-app脚手架从零开始构建项目。最后这个应用程序有诸如清除、撤销和使用localStorage基本功能。本文我将向您展示任何构建自定义Hooks和在普通的Hooks中重用有状态逻辑。基本设置我们首先使用create-react-app创建一个新的React应用程序。$ npx crea

- 阅读全文 -

css回流重绘

回流回流又名重排,指几何属性需改变的渲染。但感觉回流这个词比较高大上,后续统称回流吧。可理解成,将整个网页填白,对内容重新渲染一次。只不过以人眼的感官速度去看浏览器回流是不会有任何变化的,若你拥有闪电侠的感官速度去看浏览器回流(实质是将时间调慢),就会发现每次回流都会将页面清空,再从左上角第一个像素点从左到右从上到下这样一点一点渲染,直至右下角最后一个像素点。每次回流都会呈现该过程,只是感受不到而

- 阅读全文 -

px rem em vh vw之间的区别到底是啥?

绝对长度pxpx是像素值,是一个固定的长度,比如我们的米,厘米一样。相对长度为什么我们需要相对长度rem em等?🤔固定长度已经不能满足我们现在的需求了。🌰举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。remrem 与 px 的计算关系rem的值是px的倍数默认情况下font-size = 16px,那么1re

- 阅读全文 -

前端JavaScript css遵守各司其职原则

第一个故事:切换到夜间模式在 WEB 开发中,HTML 负责网页的结构,CSS 负责网页上各个元素的展示样式,JS 则负责网页和用户的交互。想要成为一名优秀的前端工程师,首先要做的就是遵守这三者各司其职的原则,让我们的代码易于维护和扩展。但是,有时候我们常常一不小心就破坏了这个原则。又或者,我们为了实现业务需求,根本不管这个规则。这都会导致我们的代码结构混乱,维护困难。那么下面,我就通过一个例子,

- 阅读全文 -