标签：#CSS
46 篇文章
解决自定义字体加载闪烁问题
解决自定义字体加载闪烁问题
使用 `font-display: swap;` 属性可以有效解决加载自定义字体时出现的闪烁问题。
iOS 内容安全区域处理
iOS 内容安全区域处理
本文介绍如何在 iOS 设备上使用 CSS 处理内容安全区域，避免内容被刘海屏或底部虚拟按键遮挡。文章提供 HTML `<meta>` 标签和 CSS 代码示例，以及一个使用 JavaScript 异步调用 App 的函数。
幻灯片左右两侧显示一小块预览
幻灯片左右两侧显示一小块预览
使用 Swiper 实现幻灯片左右两侧显示预览效果的教程，包含 HTML、CSS 和 JavaScript 代码示例。
CSS border-radius 属性详解
CSS border-radius 属性详解
本文深入讲解 CSS 属性 `border-radius` 的使用方法，并提供示例代码，包括如何使用百分比和具体数值来创建圆角边框。
CSS 动画实现元素从右到左插入
CSS 动画实现元素从右到左插入
使用 CSS 动画，让一个元素从右侧平滑地插入到页面中。文章提供 HTML、CSS 和 JavaScript 代码示例，并解释了实现方法。
CSS 图片比例设置方法
CSS 图片比例设置方法
本文介绍两种使用 CSS 设置图片比例的方法：第一种方法使用 `width`、`height`、`object-fit: cover` 属性；第二种方法使用 `aspect-ratio` 属性。两种方法都能有效控制图片比例，避免图片变形。
前端动画库推荐
前端动画库推荐
本文推荐几款常用的前端动画库，包括 animate.css, animejs, motion.dev 和 framer，方便开发者选择合适的动画库进行开发。
被选择文本的圆角样式
被选择文本的圆角样式
本文介绍如何使用 CSS 实现被选择文本的圆角样式，包含代码示例和详细解释，帮助你快速上手。
父元素设置 min-height 后，子元素 height: 100% 无效的解决方法
父元素设置 min-height 后，子元素 height: 100% 无效的解决方法
本文探讨了父元素设置 `min-height` 后，子元素设置 `height: 100%` 无效的问题，并提供了六种有效的解决方法，包括使用 `position: relative/absolute`、Flex 布局、Grid 布局以及 `min-height: inherit` 等，并分析了每种方法的优缺点。
CSS 设置背景颜色透明
CSS 设置背景颜色透明
学习两种使用 CSS 设置背景颜色透明的方法：`background-color: rgba(0, 0, 0, 0.5);` 和 `opacity: 0.5;`，了解它们的区别和适用场景。
overflow: hidden 不生效，文字覆盖到 padding 上问题解决
overflow: hidden 不生效，文字覆盖到 padding 上问题解决
CSS overflow:hidden 属性失效，导致文字超出 padding 的问题及解决方案。文章分析了该问题出现的原因，并提供了一种通过设置 display: flex 和 overflow: hidden 解决该问题的有效方法。
Tailwind CSS Animate 动画库
Tailwind CSS Animate 动画库
Tailwind CSS Animate 动画库，一个好用的动画库，支持在线调试。https://www.tailwindcss-animated.com/
前端 JS 生成随机 CSS 样式
前端 JS 生成随机 CSS 样式
使用 JavaScript 生成随机的 CSS 样式，使页面元素在鼠标悬停时显示随机颜色。
前端 JS 生成好看的背景
前端 JS 生成好看的背景
使用 JavaScript 和 CSS 代码生成漂亮的动态背景效果。代码包含颜色数组，随机生成不同大小和位置的彩色方块，并添加悬停动画和阴影效果，最终实现一个好看的背景。
iOS Safari 下 CSS 100vh 高度问题及解决方案
iOS Safari 下 CSS 100vh 高度问题及解决方案
iOS Safari 浏览器存在一个已知问题：使用 CSS 中的 `100vh` 属性时，高度往往会比屏幕实际高度多出一小部分。本文讨论了这个问题的成因，并提供了解决方案，使用`@supports (-webkit-touch-callout: none) { height: -webkit-fill-available; }`来修正 iOS Safari 下 `100vh` 不准确的问题。
CSS 碰撞变色小球
CSS 碰撞变色小球
使用 CSS 实现碰撞变色的小球效果。文章包含 HTML 和 CSS 代码示例，演示如何通过动画和颜色计算实现小球碰撞时颜色的变化。
CSS flex 布局问题：子元素宽度和 `flex: 1` 解释
CSS flex 布局问题：子元素宽度和 `flex: 1` 解释
CSS flex 布局中，`align-items` 的默认值 `stretch` 会导致子元素占据父元素全部宽度，即使设置了 `display: inline-flex`。解决方法是将子元素的 `align-items` 属性设置为 `flex-start`。此外，文章还解释了 `flex: 1` 的含义及适用场景，`flex: 1` 是 `flex: 1 1 0%` 的简写。
CSS 鼠标点击穿透问题解决
CSS 鼠标点击穿透问题解决
本文介绍如何解决 CSS 鼠标点击事件穿透的问题。通过设置 `pointer-events` 属性来控制元素是否响应鼠标事件，`pointer-events: none;`可以阻止元素响应鼠标事件，而`pointer-events: auto;`则允许其响应鼠标事件。文章还讲解了如何避免父元素阻止子元素接收鼠标事件。
CSS 固定宽高比
CSS 固定宽高比
CSS 实现固定宽高比的多种方法，包括使用 `aspect-ratio` 属性和通过 padding-bottom 技巧实现。
CSS 相对居中
CSS 相对居中
使用 CSS 实现元素相对居中的方法。
CSS 字体呈现优化
CSS 字体呈现优化
字体加载缓慢导致页面渲染缓慢，影响用户体验。本文介绍如何使用 `font-display` 等方法优化 CSS 字体呈现，从而提升页面加载速度。
CSS `display: inline` 研究：多个 div 在一个段落内显示
CSS `display: inline` 研究：多个 div 在一个段落内显示
CSS `display: inline` 的使用研究：如何将多个 div 在一个段落内显示，以及解决`display: inline`下 `margin`失效的问题，并使用`line-height` 调整间距。
CSS text-indent 属性 (段前缩进)
CSS text-indent 属性 (段前缩进)
CSS `text-indent` 属性用于设置文本的段落缩进。本文介绍如何使用 `text-indent` 属性实现段落前缩进，并提供示例代码。
CSS 解决 border 影响元素宽高的问题 (box-sizing 属性)
CSS 解决 border 影响元素宽高的问题 (box-sizing 属性)
在 CSS 中动态设置 `border`属性时，`border` 会影响元素的宽高。本文介绍两种解决方法：使用`box-sizing: border-box;`属性，或者使用 `outline` 代替`border`。
使用视频作为网页背景
使用视频作为网页背景
如何使用 CSS 和 HTML 创建以视频为背景的网页。文章包含代码示例及参考链接，讲解如何实现全屏视频背景。
非阻塞加载 CSS：避免 CDN 故障导致页面加载延迟
非阻塞加载 CSS：避免 CDN 故障导致页面加载延迟
页面加载 CSS 文件时，如果 CDN 链接失效，会导致页面加载缓慢。本文介绍一种非阻塞加载 CSS 的方法，有效避免 CDN 故障导致的页面加载延迟，通过使用 `media='none'`属性和`onload` 事件，在 CSS 文件加载完成后再将其应用于页面。
CSS resize 属性详解
CSS resize 属性详解
CSS `resize` 属性允许调整元素大小。本文详细介绍了 `resize` 属性的使用方法，并提供了一个自定义可调整大小侧边栏的代码示例，讲解如何通过修改滚动条样式来间接控制拖动按钮样式。
解决 Element UI el-tree 组件宽度超出父元素滚动条无效问题
解决 Element UI el-tree 组件宽度超出父元素滚动条无效问题
解决 Element UI 框架中 el-tree 组件宽度超出父元素时，滚动条失效的问题。本文提供 CSS 样式代码，通过设置 overflow 属性和调整节点样式来解决这个问题。
CSS 属性选择器及 Vue scoped 样式穿透
CSS 属性选择器及 Vue scoped 样式穿透
Vue 的 style 使用 scoped 属性时，会给相关 DOM 元素添加类似 `[data-v-26725ac2]` 的属性，导致无法通过 CSS 选择器直接选中某些由 JavaScript 生成的 DOM 元素。本文介绍如何使用属性选择器 (`[data-v-26725ac2]`) 和 `v-deep` (已弃用，建议使用 `>>>` 或深度选择器) 解决这个问题，并详细解释 CSS 属性选择器的用法。
CSS `text-align: center` 图片居中失效的解决方法
CSS `text-align: center` 图片居中失效的解决方法
使用 CSS `text-align: center` 属性使图片水平居中时，图片需要设置 `display: inline-block;` 属性。本文解释了原因，并提供了代码示例。
CSS 原子化设计
CSS 原子化设计
本文探讨 CSS 原子化设计，介绍了利用 Sass 循环生成 CSS 类的方法，并推荐了 Windi CSS、Tailwind CSS 和 uView UI 等成熟方案，以及它们的优缺点。文章还分析了 uView UI 中优雅的 CSS 原子化代码示例，并提供了代码示例。
滚动条导致的布局问题
滚动条导致的布局问题
Flex 布局下，滚动条的出现与否导致元素位置发生变化的 CSS 布局问题排查与解决方法。文章描述了一个由于滚动条的存在与否导致输入框在页面上位置不同的 bug，并分析了其原因。
使用 CSS 隐藏滚动条并绘制三角形
使用 CSS 隐藏滚动条并绘制三角形
使用 CSS 绘制三角形，并介绍如何隐藏滚动条。文章包含代码示例，以及对 CSS 形状绘制的资源链接。
CSS 禁用文本选择
CSS 禁用文本选择
使用 CSS 禁用文本选择的方法。
CSS 隐藏滚动条
CSS 隐藏滚动条
使用 CSS 隐藏滚动条的方法。
CSS Grid 平均分布自动换行
CSS Grid 平均分布自动换行
使用 CSS Grid 实现子元素宽度高度固定，列数不固定，且内容整体平均分布，自动换行的布局效果。解决 flex 布局在列数不固定时，最后几个元素难以居左的问题。
CSS 实现 1px 高清边框
CSS 实现 1px 高清边框
移动端 1px 边框的 CSS 实现方案，包括利用伪元素缩放实现高清 1px 边框的代码和解决方法。本文提供了一种使用伪元素和缩放来解决移动端 1px 边框模糊问题的 CSS 代码，并针对不同设备像素比做了适配。
HTML 回车换行与 CSS
HTML 回车换行与 CSS
如何使用 CSS 使 HTML 代码中的回车换行生效。介绍了 `white-space: pre-line;` 和 `white-space: pre-wrap;` 属性。
CSS 选择器详解：`[id~=footnotes]` 失效原因分析
CSS 选择器详解：`[id~=footnotes]` 失效原因分析
深入探讨 CSS 选择器，特别是 `[id~=footnotes]`选择器失效的原因，并与`[id^='footnotes']` 进行比较。文章通过一个实际案例，解释了如何正确选择包含特定字符串的 ID 属性。
CSS 设置文本不可选
CSS 设置文本不可选
CSS 设置文本不可选，防止部分文本被选中。使用 `user-select: none;` 属性即可。
深入理解 CSS 中的块格式化上下文 (BFC)
深入理解 CSS 中的块格式化上下文 (BFC)
深入理解 CSS 中的块格式化上下文 (BFC)，学习如何使用 BFC 阻止元素被浮动元素覆盖，包含浮动元素，以及阻止 margin 合并。文章包含代码示例和个人理解，适合有一定前端基础的开发者学习。
CSS 鼠标悬停光标变化
CSS 鼠标悬停光标变化
本文介绍如何使用 CSS 的`cursor: pointer;`属性以及其他 cursor 属性值，例如 auto、default、wait、text 等，实现不同类型的鼠标光标效果，例如鼠标悬停时变为小手。
CSS hover 的用法详解及示例
CSS hover 的用法详解及示例
本文详细介绍了 CSS hover 的用法，并通过一个示例演示了如何实现鼠标移到父 div 时显示子 div，移出父 div 时隐藏子 div 的效果。文章还包含一个 Stack Overflow 问题的链接，该问题与 CSS hover 相关。
CSS position: absolute 属性问题详解
CSS position: absolute 属性问题详解
本文深入探讨了 CSS 中 `position: absolute` 属性的使用，特别是子元素相对于父元素定位的问题。详细解释了为什么父元素需要设置 `position: relative` 属性才能使子元素的 `absolute` 定位生效，并通过示例代码演示了正确的使用方法。
Safari 字体设置无效排查及解决方案
Safari 字体设置无效排查及解决方案
在 Safari 浏览器中，字体设置无效的问题排查与解决方法。文章分析了 `lang` 属性对字体设置的影响，并提供了解决方案。
前端文档查询：MDN Web 文档 (Mozilla)
前端文档查询：MDN Web 文档 (Mozilla)
MDN Web 文档 (Mozilla) 是一个查找前端开发相关资料的优秀资源。该文档提供了丰富的 Web 技术信息，涵盖 HTML、CSS、JavaScript 等方面。