css的box模型

by Bryan Smith

通过布莱恩史密斯

拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model)

Understanding the CSS Box Model is crucial in being able to master how elements are laid out on a page. In the most basic of terms, the Box Model is as follows: margin, border, padding and content. But what does that all mean? How do these words work together?

了解CSS Box模型对于掌握元素在页面上的布局方式至关重要。 用最基本的术语来说，Box模型如下：边距，边框，填充和内容。 但这一切意味着什么？ 这些单词如何一起工作？

Welp.

威尔

In this week’s post we’ll jump right into it and have you feeling like a Box Model Master. Styling elements and giving them proper spacing left and right (and top and bottom…get it? Because you are arranging your elements on the page ?…sorry for the bad jokes).

在本周的帖子中，我们将直接进入其中，让您感觉像盒子模型大师。 设置元素的样式并为其左右分配适当的间距(以及顶部和底部…得到它吗？因为您是在页面上排列元素的？……抱歉给您带来不好的笑话)。

Take a peek at this visual break down provided by the Chrome Console:

看看Chrome控制台提供的以下视觉细分：

You can see that each part of the Box Model is labeled for you except content — that’s the blue box in the very middle. Let’s break down how each part works and the unique differences between them.

您会看到Box Model的每个部分都为您贴了标签，但内容除外-那是中间的蓝色框。 让我们分解一下每个部分的工作方式以及它们之间的独特区别。

保证金 (Margin)

You can think of the margin as a buffer for your element. Want a little space around your element? That is what margin is there for. Let’s imagine you have a cold. You should (hopefully) be staying away from people so you don’t spread it around. You need some margin around you. Take a look at this image to further illustrate:

您可以将边距视为元素的缓冲区。 想要在元素周围留一点空间？ 那就是保证金。 假设您感冒了。 您应该(希望)远离人们，以免散布它。 您周围需要一些保证金。 看一下这张图进一步说明：

Notice how your friends are all spread out from you and you’re surrounded by orange? That is margin in action. You remain the same size but there is a no-entry zone for all things around you. Same thing goes for elements on your page. Margin will give you space around your element and keep things separated. To put it simply, margin will put invisible spacing around your element without directly affecting its size. In this example we’ve made it orange to give you a visual cue of where it stands in relation to the content (a sick you in this case).

请注意，您的朋友是如何从您身边分散开的，而您却被橙色包围了？ 那是行动的余地。 您的大小保持不变，但是周围所有事物都没有进入区域。 页面上的元素也一样。 保证金将为您提供围绕元素的空间，并使各个部分分开。 简单地说，margin将在您的元素周围放置不可见的间距，而不会直接影响其大小。 在此示例中，我们将其设置为橙色，以直观地提示其相对于内容的位置(在本例中为您感到不适)。

边境 (Border)

Border is the second property from outside edge of your element. Border, as you may have guessed, is used to define a visual edge to your element. Border will increase the presentational size of your element or the part that is visually seen on the screen. There can still be margin involved, but it will be on the outside edge of the border. Lets take another look at you being sick, but this time with a little border involved:

边框是元素外部边缘的第二个属性。 您可能已经猜到了，边框用于定义元素的视觉边缘。 边框会增加您的元素或在屏幕上可见的零件的外观尺寸。 仍然可能涉及边距，但是它将位于边界的外部边缘。 让我们再看看您生病了，但是这次涉及到一点点边界：

It looks almost identical to the margin demo before, except there is now a black box around it. That is our border. One thing to remember is that our content (the sick emoji) is now the size of the emoji plus the border on each side.

它看起来与以前的margin演示几乎相同，除了现在周围有一个黑框。 那是我们的边界。 要记住的一件事是，我们的内容(病态的表情符号)现在是表情符号的大小加上两侧的边框。

Okay, enough of the sick emoji. Let’s talk about padding.

好吧，够病了的表情符号 让我们谈谈填充。

填充 (Padding)

Padding is the third item from the outside edge. And, like the margin and border before it, is totally optional. The biggest thing to keep in mind when trying to find the difference between margin and padding is that padding WILL increase the presentational size of your element.

填充是外边缘的第三项。 并且，像之前的边距和边框一样，它是完全可选的。 试图找到空白和边距之间的区别时要记住的最大事情是，边距将增加元素的外观大小。

Let’s imagine your grandmother is sending you a birthday gift. She packs it up and sends it off in the mail. Now, being that your grandmother doesn’t want your present to get ruined while being sent to you, she really adds to the packaging. Here is a visual for what I mean:

假设您的祖母给您送了生日礼物。 她将其打包并通过邮件发送出去。 现在，由于您的祖母不希望您的礼物在被发送给您时被破坏，所以她真的增加了包装。 这是我的意思的视觉效果：

You receive the gift and assume that grandma went all out and got you a 60 inch TV.

您收到礼物，并假设奶奶全力以赴，为您提供了60英寸的电视。

Wrong.

错误。

She just added some padding (see what I did there?) to the box that made it take up more space and appear bigger.

她只是在包装盒中添加了一些填充物(看看我在那儿做了什么？)，使其占用更多空间并显得更大。

Let me give you a relevant coding example. You create a <div> that is 100px wide by 100px tall. You add 10px of padding to each edge, and now that <div> is 120px wide by 120px tall because of the added padding on each side. Keep that in mind as you are laying out the elements of your page.

让我给您一个相关的编码示例。 您创建一个<d iv>，该宽度为100px宽乘以100px高。 您在每条边上添加了10px的填充，现在<div>宽为120px，高为120px that是因为每侧都添加了填充。 在布置页面元素时，请记住这一点。

内容 (Content)

Content, content, content. This is what our page is made of. Content is how you initially describe it in your CSS or its natural height if you are using an image. You created a <div> that is 50px wide by 300px tall? That is how much real estate on your screen it will take if it isn't altered by any of the above parts of the Box Model. Content is the present your Grandma gave you, it is the sick emoji.

内容，内容，内容。 这就是我们页面的组成。 内容是您最初在CSS中描述它的方式，或者如果您使用图像，则是它的自然高度。 您创建的<d iv>宽50像素x高300像素吗？ 如果不通过Box Model的上述任何部分进行更改，这就是屏幕上需要占用的空间。 内容是您奶奶给您的礼物，它是病态的表情符号。

装箱尺寸 (Box Sizing)

I would be remiss if I didn’t mention box-sizing: border-box right now. I don't want to dive too deep into the specifics of it, but there is a CSS property called box-sizing that defaults to content-box for its value. Take a look at this CodePen to demonstrate. The children have no respect of the parent container, extending out of it.

如果我现在不提到box-sizing: border-box我会很失落。 我不想深入探讨它的细节，但是有一个CSS属性叫做box-sizing ，它的值默认为content-box 。 看一下此CodePen进行演示。 子代不尊重父容器，而是从父容器中伸出。

And now with the power that is box-sizing: border-box:

而现在，它具有box-sizing: border-box ：

The children are now contained inside of the parent (and probably doing their chores and coming home by curfew). The CSS is exactly the same in each demo, except for one small addition to the second one:

现在，孩子们被关在父母的内部(可能是他们做家务，宵禁后回家)。 每个演示中CSS完全相同，除了第二个演示中的一小部分：

*, *:before, *:after {   box-sizing: border-box; }

These three lines of code are telling every element on our page to calculate their width and height with border and padding added to it, whereas the first demo was a free wheelin’ mess that didn’t respect anyone or anything. The padding and border were added to the width and flowed outside of the parent container.

这三行代码告诉我们页面上的每个元素都要计算它们的宽度和高度，并添加边框和内边距，而第一个演示是一个随意的烂摊子，它不尊重任何人或任何东西。 填充和边框添加到宽度，并流到父容器的外部。

包装全部 (Wrapping it all up)

The box model is fundamental to understanding how things will lay out on your page. Hopefully, you now have a great understanding of how the Box Model works and how you can use it to your advantage. I also hope this means no more typing “margin: 10px;…[wait for page changes…delete, delete, delete] padding: 10px…”.

盒子模型是了解事物在页面上的布局方式的基础。 希望您现在对Box Model的工作原理以及如何利用它发挥自己的优势有了很好的了解。 我也希望这不再需要键入“ margin：10px;…[等待页面更改…删除，删除，删除] padding：10px…”。

Originally published at www.frontamentals.com.

最初发布在www.frontamentals.com上 。

翻译自: https://www.freecodecamp.org/news/css-box-model-b3e68ceea756/

css的box模型