破解CSS的关键

一切都是盒子！ (Everything is a box!)

Let’s start from the assumption that every HTML element when it is rendered inside the DOM is rendered as a box. Then you can start adding content or some style to make it look fancier. In the beginning, this is how our boxes actually look for the browser:

让我们从一个假设开始，即每个HTML元素在DOM内部呈现时都呈现为box 。 然后，您可以开始添加内容或某种样式以使其看起来更精美。 首先，这是我们的盒子实际用于浏览器的外观：

The blue rectangle represents the content size, which could be specified by the height or width property or could fit on the size of the children.

蓝色矩形代表内容的大小，可以由height或width属性指定，也可以适合子项的大小。

The green rectangle is the padding, which pushes all the elements contained in the box towards the inside. Internal spacing.

绿色矩形是填充，它会将框中包含的所有元素推向内部。 内部间距。

The light orange rectangle is the border of the box.

浅橙色矩形是框的边框。

The dark orange rectangle is the external margin, it pushes the elements around the box further away.

深橙色矩形是外部边距，它将框周围的元素推得更远。

These 4 dimensions, combined together, represent the physical space that our box occupies: height/width + padding + border + margin = actual space. However, This CSS box model is not so intuitive.

这4个维度组合在一起，代表了我们的盒子占用的物理空间： 高度/宽度+填充+边框+边距=实际空间。 然而， 这个CSS盒子模型不是那么直观。

Let me give you an example to make this clearer. Imagine this situation:You have two boxes with padding and border, inside a container 500px large, and you want these boxes to be next to each other inside the parent box. While you’re reading these words I bet you’re thinking: “That’s easy. I will just give them both width 50%”.

让我给你举个例子，使这一点更加清楚。 想象一下这种情况：您有两个带有边框和边框的框，它们位于500px大的容器中，并且您希望这些框在父框内彼此相邻。 当您阅读这些单词时，我打赌您在思考：“ 很简单。 我只给他们两个宽度50％”。

.container {
  width: 500px;
}.box {
  border: 1px solid;
  padding: 10px;
  width: 50%;
}

Well, this will be the result:

好吧，这将是结果：

Original CSS Box Model

原始CSS盒子模型

Yes. This is the moment you can start saying “What the hell is going on!?”.If you remember, we said the size of a box is equal to the width (50% of the container, so 250px), plus the padding (10px) and the border (1px) on both sides for a total of 272px. So it makes sense that they don’t fit side by side in the 500px available.

是。 这是您可以开始说“到底发生了什么！？”的时刻。 如果您还记得的话，我们说过一个盒子的大小等于宽度(容器的50％，即250px)，加上两侧的边框(10px)和边框(1px)，总计272px。 因此，在500像素可用像素中，它们不能并排放置是有道理的。

引入古怪的版本 (Introducing the quirky version)

There is a solution though! Believe it or not, it comes from the old version of Internet Explorer. In “quirk mode” the Box Model physical space is calculated by height/width + margin = actual space. So, after the community request, this version was introduced in the CSS3 standards with the property box-sizing. By assigning the value “border-box” to this property, the padding and the border will be applied inside and, using the same style we mentioned above, the result will be the following:

虽然有解决方案！ 信不信由你，它来自旧版本的Internet Explorer。 在“快速模式”下 Box Model的物理空间是通过高度/宽度+边距=实际空间来计算的。 因此，在社区提出要求后，此版本在CSS3标准中引入了属性box-sizing 。 通过将值“ border-box”分配给此属性，将在内部应用填充和边框，并使用我们上面提到的相同样式，结果如下：

Box-sizing border-box

框大小的边框

It’s pretty common to apply this rule on every element using the “*” selector:

使用“ * ”选择器将此规则应用于每个元素是很常见的：

* {
  box-sizing: border-box;
}

您必须牢记的两个规则 (The two rules you must bear in mind)

Most developers have a very bad relationship with CSS. They say “Why the hell is this rule not working!?” or “The damn div doesn’t go where it should!” or even worse they start using !important everywhere and giving values like ‘99999’ to z-index.

大多数开发人员与CSS的关系非常差。 他们说：“为什么这条规则不起作用！？” 或“该死的div不在应有的位置！” 甚至更糟的是，他们开始使用！important 到处都给z-index 赋值，例如“ 99999” 。

“999999”

“ 999999”

If you are one of these people, well, once you know the following two rules, you will stop doing this and you’ll start enjoying writing CSS. Trust me!

如果您是这些人中的一员，那么，一旦您知道以下两个规则，就将停止这样做，您将开始享受编写CSS的乐趣。 相信我！

位置 (Position)

The position property defines where the element is located within the page.With properties like “top”, “right”, “bottom”, “left”, and “z-index” it’s possible to manipulate the final position of the elements, but they will affect just positioned elements (i.e. elements that have any value other than “static”). Keep this in mind for later!

position属性定义元素在页面中的位置。使用诸如“ top”，“ right”，“ bottom”，“ left”和“ z-index”之类的属性，可以操纵元素的最终位置，但它们会影响刚刚定位的元素 (即具有除“ static”以外的任何值的元素)。 请记住这一点，以便以后使用！

The possible values are:

可能的值为：

• “static”, the default value. The element will go with the normal flow* of the page.

  默认值“ static” 。 该元素将与页面的正常 流动*一起使用。

• “relative”. The element is “relative” to its static position, according to the normal flow, but is affected by the positional properties.

  “相对” 。 根据正常流动，该元素“相对于”其静态位置，但受位置属性的影响。

• “absolute”. I consider this the most controversial. Everybody uses it because they think it does what they want, but nobody really knows how it works. The elements with this position’s value are physically removed from the flow. It’s important to understand that its position is now “relative to its first non-static ancestor”. Repeat it like a mantra!

  “绝对” 。 我认为这是最有争议的。 每个人都使用它是因为他们认为它可以实现自己想要的功能，但是没人真正知道它是如何工作的。 具有此位置值的元素将从流中物理移除。 重要的是要了解其位置现在“相对于其第一个 非静态 祖先”。 像咒语一样重复它！

• “fixed”. Again, the element will be removed from the page flow, and its positioning will be relative to the viewport (with a few minor exceptions). Moreover, fixed elements are not affected by the scroll.

  “固定” 。 同样，该元素将从页面流中移除，并且其位置将相对于视口(少数例外)。 此外，固定元素不受滚动的影响。

*The elements appear in the DOM accordingly to the order in which they are declared in the document, from top to bottom. This is considered the normal “flow”.

*元素按照在文档中声明的顺序从上到下显示在DOM中。 这被认为是正常的“ 流动” 。

显示 (Display)

Display determines the behavior of an element in relation to other elements. Once you understand how the different values affect the element and its surroundings you’ll have the key to crack the code. In the case of “display”, we can’t say there’s a unique default value. It depends on the HTML tag we are using, each one will have a default value coming from the “computed style”* (eg. divs are “block”, spans are “inline”).

显示确定一个元素相对于其他元素的行为。 了解了不同的值如何影响元素及其周围环境后，您便具有破解代码的钥匙。 对于“显示”，我们不能说存在唯一的默认值。 这取决于我们使用HTML标记，每个标记都有一个默认值，该默认值来自“ 计算样式” * (例如div是“ block”，span是“ inline”)。

The possible values are:

可能的值为：

• “block”. It enforces a vertical stacking, elements with the display property set to block will take all the possible horizontal space, generating a line break before and after the box.

  “阻止” 。 它强制进行垂直堆叠，其display属性设置为block的元素将占用所有可能的水平空间，从而在框的前后产生换行符。

• “inline”. Differently from “block”, it allows a horizontal alignment. The inline elements will be displayed one next to each other, and they will ignore any given width, height, and vertical margin.

  “内联” 。 与“块”不同，它允许水平对齐。 内联元素将彼此相邻显示，并且它们将忽略任何给定的宽度，高度和垂直边距。

• “inline-block”. A mixture of the previous two. It allows a horizontal alignment and we’ll still be able to use the width and height properties.

  “内联块” 。 前两者的混合。 它允许水平对齐，我们仍然可以使用width和height属性。

• “flex”. It initializes the flexbox layout system. The container (the element with display set to flex) will have control over the flow of its items. We can align the items and distribute the available space depending on the options we give.

  “ flex” 。 初始化flexbox布局系统。 容器(显示设置为flex的元素)将控制其物料流。 我们可以调整项目并根据我们提供的选项分配可用空间。

• “grid”. It initializes the grid layout introducing a two-dimensional grid system with columns and rows. Based on a set of rules we will be able to create “easy-to-make” responsive layouts.

  “网格” 。 它初始化网格布局，引入具有列和行的二维网格系统。 基于一组规则，我们将能够创建“易于制作”的响应式布局。

In future articles, we will go in more depth talking about “grid” and “flex”.

在以后的文章中，我们将更深入地讨论“网格”和“弹性”。

*Browser has a user agent stylesheet that applies some built-in style to the HTML tags we use.

*浏览器有一个用户代理样式表，该样式表将一些内置样式应用于我们使用HTML标记。

Z-index的奥秘 (The mystery of z-index)

Probably the most misunderstood rule of all. In order to use it correctly, we need to assume a couple of concepts. First of all, what it does: it controls the vertical stacking order of elements that overlap. This implies that it works only with positions other than static, otherwise, they can’t overlap.

可能是所有规则中最容易被误解的规则。 为了正确使用它，我们需要假设两个概念。 首先，它的作用是： 控制 重叠 元素的垂直堆叠顺序 。 这意味着它仅适用于静态以外的其他位置，否则它们不能重叠。

The second important behavior to understand is that nesting matters. Every time we put elements inside containers, we start a brand-new stack, similar to when you have paragraphs and sub-paragraphs. We can number paragraphs like 1, 2, 3… and all the sub-paragraphs of 1 will be 1.1, 1.2, 1.3. The same way you expect all of them to be before paragraph 2, if you have an element inside another with z-index equal to 1, it will be always behind other elements that at the same level of nesting have a bigger number. You should ask your self: “Is 1.9999… bigger than 2?”. The answer is obviously “No”, so why should the element be in front?

要理解的第二个重要行为是嵌套很重要。 每次将元素放入容器时，都会启动一个全新的堆栈，类似于您拥有段落和子段落的情况。 我们可以一些段落像1，2，3 ...和所有的1分段将是1.1，1.2，1.3。 以相同的方式，您希望所有这些元素都位于第2段之前，如果您在另一个元素中具有z-index等于1的元素，则该元素将始终位于嵌套相同级别的其他元素数目较大的其他元素之后。 您应该问自己：“ 1.9999…大于2吗？”。 答案显然是“否”，那么为什么元素应该在前面？

Here you have a visual example, where the two yellow and the blue divs are children of the red one, so we should read their z-index like this: 4.1, 4.3, 4.6.

在这里，您有一个直观的示例，其中黄色和蓝色两个div是红色一个的子级，因此我们应像这样读取它们的z-index ： 4.1，4.3，4.6。

This starts making sense right!?

这开始有意义吧！？

带走 (Takeaway)

Sometimes CSS seems impossible to predict, but it’s just a matter of understanding how the rules are related to each other, which is possible by mastering a few principals of this language, and if you don’t know something, just try and see what happens.I have a collection called “CSS fundamentals” on Codepen, each pen tackles different topics, and at the bottom of each CSS file, I explain step by step what you need to do. You can follow the instructions and see the consequences of each change.

有时CSS似乎无法预测，但这只是了解规则之间的相互关系，这可以通过掌握该语言的一些原理来实现，如果您不了解某些内容，请尝试看看会发生什么我在Codepen上有一个名为“ CSS基础 ”的集合，每支笔处理不同的主题，并且在每个CSS文件的底部，我逐步解释了您需要做什么。 您可以按照说明进行操作，并查看每次更改的后果。

If you have any questions or just want to talk about CSS reach me out on Linkedin.

如果您有任何疑问或只是想谈论CSS，请通过Linkedin与我联系。

翻译自: https://levelup.gitconnected.com/essential-keys-to-crack-css-6f938bb9d4bf