Tag: CSS

All the articles with the tag "CSS".

• CSS 属性选择器及 Vue scoped 样式穿透

  Published:Jan 10, 2022 |  at 09:41 AM

  Vue 的 style 使用 scoped 属性时，会给相关 DOM 元素添加类似 `[data-v-26725ac2]` 的属性，导致无法通过 CSS 选择器直接选中某些由 JavaScript 生成的 DOM 元素。本文介绍如何使用属性选择器 (`[data-v-26725ac2]`) 和 `v-deep` (已弃用，建议使用 `>>>` 或深度选择器) 解决这个问题，并详细解释 CSS 属性选择器的用法。

• CSS `text-align: center` 图片居中失效的解决方法

  Published:Dec 30, 2021 |  at 09:27 AM

  使用 CSS `text-align: center` 属性使图片水平居中时，图片需要设置 `display: inline-block;` 属性。本文解释了原因，并提供了代码示例。

• CSS 原子化设计

  Published:Dec 29, 2021 |  at 05:51 PM

  本文探讨 CSS 原子化设计，介绍了利用 Sass 循环生成 CSS 类的方法，并推荐了 Windi CSS、Tailwind CSS 和 uView UI 等成熟方案，以及它们的优缺点。文章还分析了 uView UI 中优雅的 CSS 原子化代码示例，并提供了代码示例。

• 滚动条导致的布局问题

  Published:Dec 28, 2021 |  at 03:52 PM

  Flex 布局下，滚动条的出现与否导致元素位置发生变化的 CSS 布局问题排查与解决方法。文章描述了一个由于滚动条的存在与否导致输入框在页面上位置不同的 bug，并分析了其原因。