洛阳郊区1980年地图_在无聊的郊区居住中解释CSS Box模型

洛阳郊区1980年地图

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

如果您去过一个普通的郊区社区，那么您可以了解CSS Box Model。 (If you’ve been to a normal suburban neighborhood, then you can understand the CSS Box Model.)

An experienced front-end web developer will tell you that an HTML layout is really just a series of boxes. These boxes stack on top of each other within their container boxes, and those container boxes stack on top of each other within an even larger container box, and then…

经验丰富的前端Web开发人员会告诉您HTML布局实际上只是一系列方框。 这些盒子在它们的容器盒中彼此叠放，而那些容器盒在更大的容器盒中彼此叠放，然后…

WOW. That is a lot of boxes within boxes. I don’t think I want to hear the word “box” for at least a week. Also, the box concept does not do a good job of describing margins and padding. These are the two biggest tools for creating evenly-spaced elements.

哇。 盒子里有很多盒子。 我不希望至少一个星期听到“盒子”一词。 此外，盒子的概念在描述边距和填充方面也做得不好。 这是用于创建均匀间隔元素的两个最大工具。

In reality, there is a little bit more nuance when it comes to arranging HTML elements. The CSS Box (gasp!) Model allows us to create well-balanced and easily readable content on our page.

实际上，在安排HTML元素时会有更多细微差别。 CSS Box(gasp！)模型使我们能够在页面上创建平衡且易于阅读的内容。

The different pieces of the box model are kind of like a property in a typical suburban housing development. And if you can use them correctly, you can avoid hours of trial and error with fussy CSS.

盒子模型的不同部分有点像典型郊区住宅开发中的财产。 如果可以正确使用它们，则可以避免使用繁琐CSS进行反复试验。

If you are looking for a more technical explanation, the MDN has a pretty good one.

如果您正在寻找一种更技术性的解释，那么MDN就是一个很好的解释。

盒子模型的主要部分 (The Main Pieces of the Box Model)

There are 5 important properties that allow you to size and distribute your HTML elements:

有5个重要的属性，可让您调整和分发HTML元素的大小：

• Width
  宽度
• Height
  高度
• Padding
  填充
• Border
  边境
• Margin
  保证金

Here is what that looks like in a diagram:

这是图中的样子：

Yikes! That is a way too many boxes for one element. Let’s take this back one step. There are actually three different zones here.

kes！ 这对于一个元素来说太多了。 让我们退后一步。 实际上，这里有三个不同的区域。

Zone 1: The height and width of the actual element. This is the house itself. In the diagram, this is 679 pixels by 63 pixels.

区域1：实际元素的高度和宽度。 这是房子本身。 在该图中，这是679像素乘63像素。

Zone 2: The territory around the element that is limited by the border. This is kind of like the yard and fence on your property. This is the padding and border.

区域2：元素周围的边界限制的区域。 这有点像您财产的院子和围栏。 这是填充和边框 。

Zone 3: The empty space that separates this element from the surrounding elements. This is similar to the trees that are still technically part of your property, but give you some privacy from the neighbors and are just meant to give you a buffer. This is the margin.

区域3：将此元素与周围元素分隔开的空白区域。 这类似于从技术上讲仍是您财产的一部分的树木，但它们为您提供了与邻居的一些私密性，并且仅是为您提供缓冲。 这就是保证金 。

Remember that every div, paragraph and header has these properties. It can get confusing pretty quickly when you have a series of elements stacked on top of one another, and you have no idea which elements contain the buffer space.

请记住，每个div，段落和标题都具有这些属性。 当您将一系列元素堆叠在一起并且不知道哪些元素包含缓冲区空间时，它可能会很快使您感到困惑。

The difference between the margin and the padding is perhaps the most challenging part. The two are used for different reasons. As you can see with the green grass, the padding will still have a background color, if you choose to set it. This is also the property you want to change if you want to change the distance between the border and the content.

边距和填充之间的差异可能是最具挑战性的部分 。 两者的使用有不同的原因。 如您在绿草中所见，如果您选择设置填充，填充仍将具有背景色。 如果要更改边框和内容之间的距离，这也是您要更改的属性。

Let’s say you want to have a massive yard on the right side of the house, that would make the right border far away. You could change this with the padding-right property.

假设您要在房子的右侧有一个巨大的院子，以使正确的边界更远。 您可以使用padding-right属性更改此设置。

The margin property affects the space between elements. This is that empty space that is a sort of “no man’s land” where no development occurs. It is strictly meant for spacing out elements. Here are a couple houses in a row, some of which have larger or smaller margins.

margin属性会影响元素之间的空间。 这就是没有发展的“无人区”。 它严格用于分隔元素。 这是一排排的房屋，其中一些房屋的边距更大或更小。

NOTE: Each of these stacked houses must have a display with a value of “inline-block”. Prevents margin-collapsing.

注意：这些堆叠的房屋中的每一个都必须具有一个值为“ inline-block”的显示屏。 防止边际崩溃 。

一些真实的例子 (Some Real Examples)

Alright, let’s use some real CSS! Imagine that you have a lot with the following attributes:

好吧，让我们使用一些真实CSS！ 想象一下，您有很多具有以下属性：

Here is what that would look like:

看起来像这样：

A couple observations:

一些观察：

1. Notice how the background color only affects the pixels within the border. The margins are not affected by this property
   请注意，背景颜色如何仅影响边框内的像素。 边距不受此属性的影响
2. When you declare margin and padding with one value, like 4px, CSS automatically applies the number to the top, bottom, left and right of the element.
   当您声明一个边距和一个值为4px的填充时，CSS会自动将数字应用于元素的顶部，底部，左侧和右侧。

Here is one last example. In this one, we will use two values when declaring padding and margin. The first value determines the top/bottom, and the second value determines the left/right value.

这是最后一个例子。 在这一篇中，我们将在声明padding和margin时使用两个值。 第一个值确定上/下，第二个值确定左/右。

And here is the diagram:

这是图表：

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS, JavaScript and SQL topics, such as positioning, Model-View-Controller, and callbacks.

如果您喜欢这篇文章，您可能还会喜欢我对富有挑战性CSS，JavaScript和SQL主题的其他解释 ，例如定位，Model-View-Controller和回调。

And if you think this might help other people in the same position as you, give it a “heart”!

而且，如果您认为这可以帮助与您处于同一位置的其他人，请给它一个“心脏”！

翻译自: https://www.freecodecamp.org/news/css-box-model-explained-by-living-in-a-boring-suburban-neighborhood-9a9e692773c1/

洛阳郊区1980年地图