Tag: CSS

All the articles with the tag "CSS".

• CSS flex 布局问题：子元素宽度和 `flex: 1` 解释

  Published:Jul 7, 2023 |  at 02:11 AM

  CSS flex 布局中，`align-items` 的默认值 `stretch` 会导致子元素占据父元素全部宽度，即使设置了 `display: inline-flex`。解决方法是将子元素的 `align-items` 属性设置为 `flex-start`。此外，文章还解释了 `flex: 1` 的含义及适用场景，`flex: 1` 是 `flex: 1 1 0%` 的简写。

• CSS 鼠标点击穿透问题解决

  Published:Jun 24, 2023 |  at 05:19 PM

  本文介绍如何解决 CSS 鼠标点击事件穿透的问题。通过设置 `pointer-events` 属性来控制元素是否响应鼠标事件，`pointer-events: none;`可以阻止元素响应鼠标事件，而`pointer-events: auto;`则允许其响应鼠标事件。文章还讲解了如何避免父元素阻止子元素接收鼠标事件。

• CSS 相对居中

  Published:Mar 2, 2023 |  at 07:03 AM

  使用 CSS 实现元素相对居中的方法。

• CSS 固定宽高比

  Published:Mar 2, 2023 |  at 06:56 AM

  CSS 实现固定宽高比的多种方法，包括使用 `aspect-ratio` 属性和通过 padding-bottom 技巧实现。