4 个 CSS 技巧可能会让你招致其他开发者的不满

CSS 中的实用技巧非常实用；YouTube 播放器要是没有这些技巧padding–bottom: 56.25%来创建 16:9 的显示比例，那还有什么用呢？我整理了一份我最喜欢的 CSS 技巧清单，供大家参考！

1. 最小边距

这个方法让我看了很多不顺眼的眼光，但这并不意味着它错了。
如果你在一行中添加宽度不同的项目，并且这些项目之间留有（相当大的）空隙，那么很难确定这些项目何时不再适合同一行。只在一侧使用边距也会影响居中项目，或者导致项目过早断裂。

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem;
}

.column {
  margin: 10px 2rem 0; // ensures a 4rem gap between items
}

2. 扩展可点击区域

我在之前的文章中讨论过这个问题，因为像::before锚标签（<a>）这样的伪元素继承了其父级的点击能力，你可以使用它来扩展链接的可点击区域。

确保添加了position: relative要用作可点击区域参考的元素。

在下面的例子中，我使用了和 ，以及position: relative和设置.list-item为的伪position: absolute元素，或者topleftrightbottom0width: 100%; height: 100%;

有些开发者会在整个列表项周围添加一个锚链接，这对于使用屏幕阅读器的用户来说非常烦人。而且，设置样式也很麻烦，因为你必须设置text-transformandcolor属性来覆盖所有文本的标准链接行为。

这个技巧也适用于按钮🤓

3. 书写模式

书写模式是一个 CSS 属性，用于设置书写方向。这当然适用于书写方向不同于从左到右的语言，对于设置旋转 90 度的文本样式也非常有用。
当您使用transform90 度旋转文本时padding-left，元素顶部将显示文本（这可能正是您所期望的），但容器的宽度也会变得很奇怪；点击文本时，请查看下面的代码。使用 则不会出现这种情况writing-mode: vertical-lr;。使用书写模式而不是变换的一大缺点是无法在两种书写模式之间设置旋转动画。

4. 填充底部

由于某种原因，当你使用百分比时，padding-bottom它们不是基于height元素的 ，而是基于width。这在设计 YouTube 嵌入的样式时非常有用，因为你可能希望它占据 100% 的可用宽度，但你无法总是准确确定该空间的宽度。使用height: 56.25%(16/9) 不起作用，但添加padding-bottom: 56.25%可以！