提高 CSS 水平的 5 个技巧

我从事 CSS 编码已有近 24 年，我觉得其他开发人员一直在说 CSS 很难，所以我想我可以分享一些这方面的内容，以便其他开发人员更容易理解。

我对 CSS 的主要思维模型是使其尽可能可预测，因此添加一个元素时你几乎可以盲目地知道它如何改变你的整个页面。

CSS 应该很简单，只要正确了解一些关键特性就可以了。

• 盒子模型
• 利润相互抵消
• 布局
• 使用表格来设置表格样式
• Em、Rem 和 Px

盒子模型

好的，学习 CSS 最简单的方法就是理解盒子模型以及如何使其成为你的 B*tch

假设这个 CSS 放在 div 上

div {
  border: 10px solid red;
  width: 200px;
  padding: 10px;
  margin: 10px;
}

这将是您的默认输出，其中中心框200px很宽，正如我们在样式中所述

但如果你改为添加box-sizing: border-box

* {
  box-sizing: border-box;
}

你明白了——你能看到区别吗？

因此现在内容框包括填充和边框，这导致内容框从中消失，200px -> 160px因为填充和边框的总大小是40px。

通过这样做，您的布局将更加可预测，并且当您为您的框赋予width: 200px200px 而不是 240px 时。

利润相互抵消

好吧，我经常看到人们忘记这一点，而且它也不是经常被提及的。因此，以下是 CSS 和标记

p {
  margin: 10px 0;
}

<p>some-text</p>
<p>some-other-text</p>

我们应该在两边留出 10px 的边距，但一个常见的错误是认为边距加起来但实际上却互相抵消了，就像这样：

因此，对于间距元素，我倾向于使用 flex/grid 及其 gap 属性来实现可预测的间距，这样我就不用担心了。

布局页面

所以我有几种工作方式，回顾这些年来，我们不得不解决一些可怕的事情，如果你熟悉“clearfix”，你就知道我在说什么。

单行内容

对于单行内容，我倾向于使用 Flexbox，原因有几个。Flex 默认是一行，所以我需要写得更少。我不需要关心每个元素的行为——每个元素都可以相对独立。

在这个例子中我想创建一个顶部栏；

因此可以通过多种方式来完成，我倾向于确保所有标题默认没有边距，以使它们更可预测。

标记

<nav>
  <img src="http://placekitten.com/50/50" alt="">

  <h3>Some title</h3>

  <button>menu</button>
</nav>

然后我会将其设计成如下样式：

nav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f1f1;
  padding: 10px;
}

nav img {
  height: 100%;
}

我将图像样式设置为 100% 高度的原因实际上是，如果设计师稍后告诉我是否可以将导航栏的高度设置为 50px，那么我只需添加它，现在菜单就会适应我的需要。

多行 2、3、n 列布局

它主要用于复制行和类似的东西，我通常使用网格来实现这一点。

对于这个例子，我想创建一个 3 列网格，我们不知道其中有多少个元素，因为元素数量会发生变化。

鉴于此标记

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</main>

我们可以像这样设计：

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

注意：这要求每个元素都具有某种内容，否则您将无法看到它们。

这很强大，因为 - 假设在平板电脑上我们只想要 2 列，那么我们可以这样做：

// Portrait tablet
@media only screen and (max-width: 768px) {
  main {
    grid-template-columns: 1fr 1fr;
  }
}

// Mobile
@media only screen and (max-width: 480px) {
  main {
    grid-template-columns: 1fr;
  }
}

我倾向于不使用中继器，因为它只会增加额外的复杂性，而且几乎不会比写出整个css repeat更短

页面布局

让我们创建下面的布局

所以我们之前有导航，现在想在页面上创建侧边栏、页脚和内容

对于主要（包装器），我们可以这样做：

main {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:             
    "nav nav"            
    "aside content"            
    "footer footer";
  grid-template-columns: 230px 1fr;
  grid-template-rows: 50px 1fr 30px;
}

主要是为了确保它填满整个页面，然后我们以最简短的方式描述我们的布局。

记得将每个元素附加到主布局

nav {
  grid-area: nav;
}

section {
  grid-area: content;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

我们可以决定所有静态元素的高度和宽度，并且可以轻松地向框中添加自定义元素。

使用表格来设置表格样式

我尝试过很多次使用网格、弹性框和浮动，但只要正确使用，表格中就能有很多内容。

我认为这是我花费最多时间去正确设计样式的事情之一，而且如果设计正确，使用表格通常会变得容易得多。

当然，它消除了单元格中 flex 的使用，但可以通过包装内容来实现。

我想扩展表格的样式并打算再写一篇关于表格的完整博客文章。

Em、Rem 和 Px

大约 10 年前，使用哪个单位其实很重要，但缩放操作系统文本和浏览器窗口实际上会缩放所有内容。而当时情况并非如此，所以 em/rem 才如此强大。

但是大多数设计师在设计 10px 时都希望是 10px，而使用 em 和 rem 来混淆你的样式会使设计变得更加困难，并且从长远来看，好处不再是好处。

因此我建议人们重新开始使用可预测且好的 px，以使您的设计更加可预测。

我可以永远谈论造型，但这些是我经常遇到的 5 件主要事情，如果你了解并做好这些事情，每个人的生活都会变得更轻松。

希望你喜欢它，如果你有任何疑问请留言，并订阅更多

//干杯