一个人做饭简单食谱

by Anabella Spinelli

通过安娜贝拉·斯皮内利(Anabella Spinelli)

如何通过两个简单的寿司布局食谱来理解CSS浮动 (How to understand CSS floats with two simple sushi layout recipes)

A few weeks ago I decided I should admit to all the things I’ve never understood about basic CSS. I would try to do a deep and conscious dive into them and get them. It seemed that now, more than a couple years after learning about CSS for the first time, I could use all the experience I’ve gathered to my advantage. This time it should be easier and clearer.

几周前，我决定我应该接受关于基本CSS的所有我从未了解的事情。 我会尝试对它们进行深入而有意识的了解并得到它们。 在第一次学习CSS的几年后，现在看来，我可以利用自己积累的所有经验来发挥自己的优势。 这次应该更轻松，更清晰了。

I also thought to myself: I cannot be the only one struggling with these properties for the Nth (or first) time. Documenting my journey into the most elusive of CSS properties would make a great bunch of articles that others could leverage.

我也对自己想： 在第N次(或第一次)，我不是唯一一个在这些属性上挣扎的人。 记录一下我进入最难以捉摸CSS属性的旅程，将产生很多其他人可以利用的文章。

Last month I kicked it off with an intro to the mysterious pairings of the position property. Here’s my second stop in the journey:

上个月，我开始介绍了position属性的神秘配对 。 这是我旅途中的第二站：

The float property, in the form of cooking recipes.

烹饪食谱形式的float属性。

食谱索引 (Recipes Index)

• Sushi rows — make elements cover a full row in an even manner

  寿司行 -使元素均匀地覆盖整行

• Clearing broth — make content found below the floats act normally

  清汤 -使漂浮物下方的内容正常运行

寿司行？ (Sushi rows ?)

We'll use floats and percentage values to distribute elements evenly in the full (container) width. Just like sushi rows in a plate.

我们将使用浮点数和百分比值在整个(容器)宽度中均匀分配元素。 就像一盘寿司排成一排。

配料： (Ingredients:)

• 1 container or board1个容器或板
• Some sushi pieces you need to distribute side-by-side.您需要并排分发一些寿司片。

• The % sign

  在%征

• 1 float: left;

  1 float: left;

说明： (Instructions:)

Prepare your sushi pieces, that is, the elements you want to be displayed in a row. They could be makis, item cards, nigiris, icons, whatever suits your taste.

准备寿司块，即要连续显示的元素。 它们可能是makis，物品卡片，nigiris，图标，任何适合您的口味。

You can also add any non-positioning styling to them: colors, text-alignment, fonts, soy sauce.

您还可以向它们添加任何非定位样式：颜色，文本对齐方式，字体，酱油。

Put them inside a block container, like a board. In its most basic form, this should be a div (but you can use any other HTML5 semantic elements such as header, footer, section, article, main). Add a descriptive class for them. I’ll be using nigiri.

将它们放在一块大容器中，就像一块木板。 以其最基本的形式，它应该是一个div(但是您可以使用任何其他HTML5语义元素，例如页眉，页脚，部分，文章，主要)。 为他们添加一个描述性的类。 我将使用nigiri 。

Now, on class nigiri we'll apply some styles, including our float: left;. Take a moment and read through them:

现在，在类nigiri我们将应用一些样式，包括我们的float: left; 。 花一点时间阅读它们：

What float: left;does is tell every element to stick to one side — in this case, left — and stand next to each other in a left-to-right row.

什么float: left; 要做的是告诉每个元素都紧贴一侧(在这种情况下为左侧)，并在从左到右的行中彼此相邻。

Note that we're adding height to the board. Normally we wouldn’t need this: the board would expand to fit whatever is in it. But floating elements, like our nigiris, are different. They don’t occupy real Document space and don’t affect other, non-floating elements. That’s why we’re using a fixed, pixel-sized height for the board.

请注意，我们正在增加木板的height 。 通常，我们不需要这样做：董事会可以进行扩展以适应其中的任何内容。 但是浮动元素，例如我们的妄想者，则有所不同。 它们不占用实际的文档空间，也不影响其他非浮动元素。 这就是为什么我们在板上使用固定的像素大小的高度。

Now, you should see all your elements on a single row. But something’s not quite right. They’re all piling up on the left and you probably have a lot of empty space on the right side of your board.

现在，您应该在一行中看到所有元素。 但是有些不对劲。 它们全都堆积在左侧，您的木板右侧可能有很多空白。

We need to space them evenly.

我们需要将它们均匀地隔开。

We can do that by setting the nigiri's width to be relative to their container (the board in this case) using a percentage value.

我们可以通过使用百分比值将握持器的宽度设置为相对于其容器(在本例中为木板)的宽度来实现。

Now this is the tricky part: the % you need to set will depend on 3 things

现在这是棘手的部分 ：您需要设置的百分比将取决于3件事

• how many items you have你有几件
• how they’re structured inwardly (padding)它们如何向内构造(填充)
• and how much space you want between them.以及它们之间需要多少空间。

Do you want them to stick to each other side by side or do they need some margin in between them? If the sushi pieces have rice padding, that will cause them to be bigger than their content. You’ll have to compensate that by decreasing their width. For this it’s also advisable to use % in the padding values.

您是否希望它们并排粘在一起，或者它们之间需要一定的余量？ 如果寿司片有米的填充 ，这将导致他们比他们的内容更大。 您必须通过减小其宽度来进行补偿。 为此，建议在填充值中使用％。

I know al this can be confusing. Here’s a handmade single-press illustration that I hope can illustrate it clearly.

我知道这可能会造成混淆。 这是一个手工制作的单按插图，我希望可以清楚地说明它。

But this is a recipe, not a math lesson. To make it easier for you, dear readers, here are some common combinations for shoulder-to-shoulder and margin-spaced elements, all with 1% rice padding:

但这是一个食谱，而不是数学课程。 亲爱的读者，为了让您更轻松，这是一些肩对肩和边缘距元素的常见组合，所有元素均使用1％的稻米填充：

You may have noticed the pattern here: we’re assuming elements come with 1% of padding. They need to compensate that by subtracting 2% (1% for each side) from the element’s percentage width. Same goes for our 1% margin breather. Now it makes more sense to not use 33.33% width for 3 elements in a row. Instead set it to 29.33% after leaving 2% the padding and 2% for the margin on each.

您可能已经注意到了这里的模式：我们假设元素带有1％的padding 。 他们需要通过从元素的百分比宽度中减去2％(每边1％)来对此进行补偿。 我们的1％ 保证金呼吸也是如此。 现在，更合理的做法是不要对连续3个元素使用33.33％的宽度。 而是在分别保留2％的填充和2％的边距后将其设置为29.33％。

Sigh… that was a lot of math. Ok so now, no matter how many pieces your sushi roll gets chopped in, you know how to present them nicely in a board.

感叹……那是很多数学。 好了，现在，无论您将寿司卷切成多少块，您都知道如何将它们很好地呈现在板上。

If you want to play around with this setup, here's a CodePen specially made for that.

如果您想使用此设置，这是专门为此设计的CodePen 。

And if you like CSS sushi, don't miss Sasha Tran's very inspiring CSS Sushi Board.

如果您喜欢CSS寿司，请不要错过Sasha Tran令人鼓舞的CSS Sushi Board 。

清汤？ (Clearing broth ?)

The perfect soup to have with some floating sushi, while making sure your portions don’t end up swimming in it.

搭配一些浮动寿司时可以搭配的完美汤品，同时确保您的食材不会在其中游动。

配料： (Ingredients:)

• One container or board with floating sushi一个带有漂浮寿司的容器或盘子
• A soup or broth to follow after it.跟随汤或汤。

• One clear: broth;

  一个clear: broth;

说明： (Instructions:)

Once you have your row of floating sushi pieces ready, place your soup container below them in the html.

准备好行的浮动寿司块后，将您的汤容器放在html中的下面。

Our sushi is meant to gracefully float "above" the Document flow and not affect other elements. If we’re not careful they might just end up floating in soup and sushi-ramen is not something the world is ready for.

我们的寿司旨在优雅地漂浮在“文档”流上方，而不影响其他元素。 如果我们不小心的话，它们可能最终会流落在汤中，而寿司拉面并不是世界所准备的。

Remember that floating elements don’t have real Document height. This also means that they don’t “push” the soup down. Now look at this horrific mess:

请记住，浮动元素没有实际的文档高度。 这也意味着他们不会“下汤”。 现在看看这个可怕的烂摊子：

To prevent this atrocity, we need to add our clear: broth;… I mean both;!

为了防止这种暴行，我们需要添加clear: broth; ……我的意思是both ; ！

We have two options here:

我们在这里有两个选择：

We can simply put the soup in a bowl or container and give the bowl a style of clear: both;. This will sort of get the job done, but it will result in things like margin-top not working at all on the bowl.

我们可以简单地将汤放入碗或容器中，使碗具有clear: both;的风格clear: both; 。 这样就可以完成工作， 但是会导致像margin-top这样的事情根本无法解决。

So if we want the sushi pieces to be completely protected from soup flooding — and not lose any features in the way — we need them to be contained in a plate with a high edge. To achieve that we’ll add an :after pseudo-element to the sushi plate (that is, the container of our little floaters):

因此，如果我们希望完全保护寿司片免受汤液泛滥的侵害，并且又不失去任何功能，则我们需要将它们装入高边缘的盘子中。 为此，我们将添加一个:after 寿司板的伪元素 (即我们的小漂浮物的容器)：

Here below there's another example for you play around with. I’ve made the plate visible using height and background color. Even though that’s not necessary for the soup to be well placed, it just makes it look fancier ?

在下面，还有另一个示例供您使用。 我已经使用高度和背景色使该板可见。 尽管这不是必需的汤很好地放置，它只是使它看起来爱好者？

Think of this as making the sushi dish have a very high southern wall in order to prevent any soup from flooding in. But… like… a nice wall.

可以认为这是为了使寿司盘具有很高的南墙，以防止汤汁泛滥。但是……就像……一面漂亮的墙。

All right, I’m super glad that you made it this far and I hope this tiny recipe book helped you get a better idea on how floats work… and how we can work with floats. Stay tuned for more deep-dive-into-basic-but-elusive-things like this ?

好吧，我很高兴您能做到这一点，并且我希望这本简短的食谱书可以帮助您更好地了解浮子如何工作……以及我们如何使用浮子。 敬请关注更多类似这样的基本知识，但又难以捉摸 ？

翻译自: https://www.freecodecamp.org/news/how-to-understand-css-floats-with-two-simple-sushi-layout-recipes-dded925706b9/

一个人做饭简单食谱