常见css问题总结1、高斯模糊 filter: blur(5px) 2、纪念日页面置灰 3、透明度 filter：alp

高斯模糊 filter: blur(5px)

img.blur {
  filter: blur(5px);
}

背景模糊

img.blur {
    backdrop-filter: blur(0.13rem);
}

纪念日页面置灰

html {
    filter: grayscale(100%);
}

透明度 filter：alpha(opacity=0)

opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

img {
    filter：alpha(opacity=0)
}

元素overflow: hidden后与下方元素距离增加，查看元素高度也没变化

经查询是因为display:inline-block和overflow:hidden同时作用在一个元素上时会导致元素的vertical-align的值变为baseline

解决办法有三种：

1、overflow变为visible
2、display变为block
3、verticle-align变为bottom

pc端文字如果有换行，选中时的下面的行会遮挡上一行，效果图如下

排查发现在不设置line-height的情况下，line-height的值和font-size值一样，选中状态下会在字体的上下多出选中效果会遮挡临近行的字体，没错，解决方案就是设置比font-size大的line-height或者设置line-height: normal(默认设置合理的行间距。)

利用css扩大按钮的可点击范围

参考地址伪元素可以代表其宿主元素来响应鼠标交互，可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向上都比宿主元素大出 10px：

button {
 position: relative;
 /* [其余样式] */
}
button::before {
 content: '';
 position: absolute;
 top: -10px; right: -10px;
 bottom: -10px; left: -10px;
}

这个基于伪元素的解决方案极为灵活，我们基本上可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位置！

注意: 由::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上，比如<img>或<br> 元素。

一个元素的内容，英文和汉字不能同时`垂直居中`

英文设置line-height等于height
中文设置display: flex; align-items: center;

css中的1和其他的数字不等宽怎么办？

设置font-family: 'Helvetica, Arial' 来使字体等宽（可能有版权问题）

js怎么改变css变量来控制日间模式和暗黑模式？

在JavaScript中改变CSS变量以控制日间模式和暗黑模式，你可以通过以下步骤实现：首先，你需要在CSS中定义你的变量，并且为日间模式和暗黑模式分别设置不同的值。例如：

:root {  
  --main-color: #000; /* 默认暗黑模式 */  
  --background-color: #fff; /* 默认暗黑模式 */  
} 
[data-theme="light"] {  
  --main-color: #fff; /* 日间模式 */  
  --background-color: #000; /* 日间模式 */  
}

然后，在你的HTML元素中，你可以添加一个data-theme属性来指定当前的主题模式：

<body data-theme="light">  
  <!-- 页面内容 -->  
</body>

接着，你可以使用JavaScript来动态改变data-theme属性的值，从而改变主题模式。例如，你可以创建一个函数来切换主题：

function switchTheme() {  
  const body = document.body;  
  const currentTheme = body.getAttribute('data-theme');  
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';  
  body.setAttribute('data-theme', newTheme); 
}

在这个函数中，我们首先获取当前的主题模式，然后判断是否应该切换到另一种模式。最后，我们更新data-theme属性的值。

然后，你可以在任何地方调用这个函数来切换主题。例如，你可以将其绑定到一个按钮的点击事件上：

const themeButton = document.getElementById('theme-button');  
themeButton.addEventListener('click', switchTheme);

在这个例子中，当用户点击ID为theme-button的元素时，就会切换主题模式。

注意，这种方式要求你的CSS变量在全局范围内（即:root选择器下）定义，这样它们才能在整个文档中被访问和修改。同时，你的CSS选择器（如[data-theme="light"]）需要能够覆盖到需要改变样式的元素

通过color-scheme来控制日间模式和暗黑模式

color-scheme为“配色方案”，在系统中指的是“白天/浅色模式”和“夜间/深色模式”。使用这个属性可以更改浏览器的默认配色方案，语法如下:

color-scheme: normal; /*表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。*/
color-scheme: light;/*表示强制使用操作系统浅色配色方案渲染元素。*/
color-scheme: dark;/*表示强制使用操作系统深色配色方案渲染元素。*/
color-scheme: light dark; /*自动*/

换肤方案、换主题色

css变量+sass变量+标签属性

[data-theme=default] { 
    --color-primary: #516BD9;
    --color-primary-bold: #3347B6;
}

把主题色的变量作为基础库的变量

$--color-primary-bold: var(--color-primary-bold) !default; 
$--color-primary: var(--color-primary) !default;

js通过改变标签属性改变主题色

window.document.documentElement.setAttribute('data-theme', 'default')

增加句号后意外从中间换行，怎么处理？

使用line-break: anywhere; 可以解决

HTML的`<img>`标签中添加`src`属性后，图像下方出现空白，怎么解决？

给图片设置display: block即可

iOS 设备上的安全区域（safe area）

随着 iPhone X、XS、XR、11 系列、12 系列以及更新版本的发布，Apple 引入了所谓的刘海和圆角设计，这些设计使得屏幕的一部分区域不再适合显示内容，因此被称为“非安全区域”（unsafe area）。而“安全区域”（safe area）则是屏幕上适合显示内容的区域。
为了在这些设备上提供更好的布局体验，Apple 引入了两个 CSS 环境变量：env(safe-area-inset-top)、env(safe-area-inset-right)、env(safe-area-inset-bottom) 和 env(safe-area-inset-left)。这些变量分别表示设备安全区域距离屏幕边缘的顶部、右侧、底部和左侧的距离。

但是，由于浏览器支持的问题，Apple 在 iOS 11.2 之前使用了另一个名为 constant 的旧语法来提供这些值。因此，为了兼容不同版本的 iOS，开发者经常同时使用 constant 和 env

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ 

padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

需要注意：

使用顺序：由于 CSS 属性的应用是从上到下的，如果 constant 在 env 之后，且 iOS 版本支持 env，那么 constant 将被忽略。因此，确保 constant 在 env 之前。
其他浏览器：env 和 constant 是 iOS Safari 的特定实现，其他浏览器（如 Chrome、Firefox 等）可能不会识别这些属性。因此，在使用这些属性时，请确保您仅针对 iOS 设备或至少考虑其他设备的回退方案。
视口单位：在某些情况下，使用视口单位（viewport units）如 vh、vw、vmin 和 vmax 可以作为处理安全区域的替代方案，但这些单位也有其限制和用途。

h5动画素材

除了可以使用gif外还可以使用apng或者svga(需要安装svgaplayerweb包)

参考

前端最全的5种换肤方案总结

常见css问题总结