我今年学到的 5 个最喜欢的 CSS 技巧

今年对我来说非常富有成效，因为我开发了许多 UI/UX 应用程序和网站。一路走来，我学到了一些提升设计水平的实用技巧。

1. CSS变量

当我们想要将相同的样式应用于常见元素时，CSS 变量非常有用。例如，我们不必为常见元素添加复杂的 box-shadow 等样式，而是可以初始化一个变量，并在每次想要将样式应用于元素时使用该变量。

我们用 :root 和想要设置的属性初始化 CSS 变量，如下所示：

:root {
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

然后我们可以在任何想要应用此 box-shadow 的元素中使用它：

.container {
   box-shadow: var(--shadow);
}

2. 高度媒体查询

除了屏幕宽度媒体查询外，我们还可以应用屏幕高度媒体查询，以便屏幕高度较小的设备也能响应。此外，当设备旋转屏幕时，屏幕高度会发生变化，我们需要反映这些变化以实现响应式设计。

@media only screen and (max-height: 800px) {
    .container {
        height: 95%;
    }
}

对于 800 像素或更少的屏幕，将改变网格元素的高度。

3. Calc函数

CSS calc 函数在设置动态宽度时非常有用。假设我们希望一个元素的宽度基于另一个元素的宽度。

.container {
    width: calc(100%-300px);
}

我们的容器元素的宽度将基于其父容器的 100% 减去 300px，因此如果它旁边的容器是 300px，我们的动态容器将做出相应的响应。

4.垂直对齐

有很多方法可以垂直对齐元素，但有时由于父元素的定位问题，可能会变得复杂而无法正常工作。有一种始终有效的方法是将需要垂直对齐的元素定位为绝对位置，并应用以下样式。

.container {
    position:absolute;
    top: -50%;
    transform: translateY(50%);
    margin: auto;
}

这将使元素与其父容器垂直对齐。

5. Border-Box 属性

.container {
    box-sizing: border-box;
}

边框是 CSS 中最实用的属性之一。它允许我们在元素上添加内边距 (padding)，同时保持元素尺寸的一致性。例如，如果我们有一个容器，宽度和高度分别为 300px 和 300px，内边距为 30px，默认情况下，CSS 会在容器尺寸上添加这 30px，从而导致设计中出现许多对齐问题和其他问题。通过应用 box-sizing: border box 属性，我们可以使所有容器的尺寸统一。box
-sizing 还可用于使输入框、文本区域和选择框具有相同的大小，从而为元素创建统一的外观。

网站：www.flexrweb.com