好文分享

理解功能类优先 tailwind css 是一款功能类优先的 css 框架，用户可以通过组合功能类轻松构建设计。为了理解功能类优先，我们首先要区分语义类和功能类这两种 css 类名命名方式。 语义类 以前比较常见的 css 命名方式是根据页面中模块的功能来命名。例如： 立即学习“前端免费学习笔记（深…

样式刷新后才正常显示？ 你有时可能会遇到这种情况：加载页面时，图表或其他元素的样式没有正确应用。但是，当你刷新页面时，它们突然正常显示了。这是怎么回事？ 图表绘制需要 CSS 和数据，而如果这些资源在初始加载时尚未加载完毕，则绘制结果将根据默认值（通常为最小值）进行。刷新时，由于缓存的原因，加载速度…

javascript 中 new audio() 播放音乐失效 近日，在制作一个基于原生 html 的网页时，使用了 new audio() 来播放一段 mp3 文件，但奇怪的是，音乐并未播放，而控制台却不断显示错误：“uncaught (in promise) domexception: fail…

小程序嵌入的 H5 页面字体失效的解决方法 问题： 在 Vue 开发的 H5 页面中，配置了自定义字体 fontface，但在 iOS 系统的小程序中，字体却失效了。 答案： 小程序的 webview 组件需要配置以下事项： 白名单配置：确保在小程序配置文件中已将 H5 页面 URL 添加到白名单列…

如何用 css 绘制不规则形状：深入浅出的指南 问题： 如何使用 css 创建本文中所示的不规则形状？ css 实现： 立即学习“前端免费学习笔记（深入）”； 要使用 css 创建此不规则形状，可以使用 clip-path 属性。clip-path 属性允许你使用一个形状蒙版来裁剪一个元素，从而创建…

CSS 浮动位置未定义的含义 在 CSS 规范中，提到浮动元素的位置未定义，指的是当浮动元素的上边距为负值，并且这个负值导致浮动元素的位置高于它原本应该在的位置时，浮动元素的位置就变得未定义。 这种情况下，浮动元素的位置可能受浏览器的影响而发生改变。它可能位于块级格式化上下文中任何位置，甚至超出父元…

scss 中内联 css 变量出错 在使用 scss 时，如果你遇到类似于 “ ” 的错误，表明你可能使用了一个 css 变量作为 scss 运算的参数。 本质上，scss 内置的函数无法接受 css 变量作为参数。这是因为 css 变量的值是动态的，而 scss 运算需要在…

如何在var()指定的背景色下设置背景透明度？ 在css中，通常使用 background-color: var(–xxx); 定义元素的背景色，其中 –xxx 是通过变量声明的颜色值。但是，当需要设置背景透明度时，却发现没有一个直接的属性可以实现。 解决方案： 根据不同情况…

如何让 input 标签的 style 内联样式覆盖外部样式？ 在 html 中，input 标签的样式通常通过外部 css 样式表进行设定。然而，在某些情况下，我们需要在 input 标签内使用 style 内联样式来覆盖外部样式。 对于 checkbox 输入框，我们需要在 style 内联样式…

如何用 javascript 实现文本框校验，并在输入框下方的提示信息前添加图片 在现代网页开发中，文本框校验是不可或缺的一环。为了提升用户体验，错误信息通常会在输入框下方显示，并会在提示信息前添加一个图标来吸引注意力。 使用 javascript 实现这一点非常简单。首先，初始化时检查文本框内容是…