vids:xvid解码器

Positioning elements on a web page can seem maddeningly difficult at times, especially given all the various methods available. And the options continue to expand, with the introduction of flexbox and grid layouts, as well as cool things like CSS3 transforms, which can also be used for amazing layout tricks.

有时，在网页上定位元素似乎非常困难，特别是考虑到所有可用的方法。 随着flexbox和网格布局的引入，以及CSS3转换之类的酷功能，这些选项也在不断扩展，这些布局也可以用于惊人的布局技巧 。

In this forum dCode, CSS expert Paul O’Brien answers anything and everything about the tricky subject of CSS positioning — from floats and relative, absolute and fixed positioning to table display and even flexbox.

在这个dCode论坛中，CSS专家Paul O'Brien回答了有关CSS定位棘手主题的所有问题，包括浮点数和相对，绝对和固定位置到表格显示，甚至是flexbox。

If you have any questions about CSS positioning, please join the conversation!

如果您对CSS定位有任何疑问， 请加入对话 ！

关于dCode (About dCodes)

Our Forum dCodes are topics that feature a guest who conducts a deep dive into a subject area. Unlike our Q&A sessions, which run for just an hour, dCode topics stay open over a long period, so that issues can be discussed at greater length and in greater depth. You can ask questions, or just sit back and follow along, over time, as the guest answers questions and posts content of interest.

我们的论坛dCode的主题是邀请来宾深入探讨主题领域的主题。 与我们的问答环节 (仅运行一个小时)不同，dCode主题可以长期开放，因此可以更长时间，更深入地讨论问题。 随着时间的流逝，客人可以提出问题，或者只是坐下来跟着，随着客人回答问题并发布感兴趣的内容。

关于保罗 (About Paul)

Paul O’Brien is a widely recognized expert in all things CSS. He co-authored the landmark tome The Ultimate CSS Reference, and for many years has been a guiding light for many a developer wandering through the dark forests of CSS.

Paul O'Brien是所有CSS领域的公认专家。 他与他人共同撰写了具有里程碑意义的巨著《 The Ultimate CSS Reference》 ，多年来一直是许多开发人员在CSS的黑暗森林中徘徊的指南。

Have you heard of containing floats with overflow: hidden or similar? It was Paul who unearthed that technique back in the day.

您是否听说过包含overflow: hidden或overflow: hidden浮标？ 保罗是那个时候发掘这项技术的人 。

If something can be done in CSS, Paul will know how to do it. He even regularly points out how to do things people thought weren’t even possible.

如果可以在CSS中完成某些工作，Paul将知道如何做。 他甚至定期指出人们认为不可能做的事情 。

保罗的主题入门 (Paul’s Topic Starter)

To start the thread off, Paul has created a small demo that simply places a small 50px fixed width and height red box to the right of the page. The html is basically as follows:

为了开始讨论，Paul创建了一个小示例，仅在页面右侧放置了一个小50px固定宽度和高度的红色框。 html基本上如下：

<div class="wrap">
<div class="box">Box</div>
</div>

Before you look at the demo take some time and see how many ways you can think of doing this?

在观看演示之前，需要花一些时间，看看可以想到多少种方法？

You may immediately think of about 3 ways to do this but as you delve into the details you find that there are in fact many ways to do this and in the demo I stopped at 15 but I wouldn’t be surprised to see quite a few ways I hadn’t thought of cropping up!

您可能会立即想到执行此操作的大约3种方法，但是在深入研究细节时，您发现实际上有很多方法可以执行此操作，在演示中，我停在15点，但是看到如此多的示例我不会感到惊讶我没想到突然冒出来的方法！

Here’s my demo and see if you can come up with other ways to do this:

这是我的演示，看看您是否可以提出其他方法来做到这一点：

See the Pen Box to the right by Paul O’Brien (@paulobrien) on CodePen.

见笔右侧框中由保罗·奥布莱恩( @paulobrien上) CodePen 。

The point of the exercise was simply to show that in CSS there are often many ways that a layout can be achieved and often the solution depends on what comes next as to what method is best to use. I often say that “the beauty of CSS is that there are many ways to do the same thing” but the difficulty for beginners is knowing which is the right way for the job in hand.

练习的目的只是说明CSS中通常可以通过多种方法来实现布局，并且解决方案通常取决于接下来要使用哪种方法。 我经常说“ CSS的美在于有很多方法可以做相同的事情”，但是对于初学者来说，困难在于要知道哪种方法才是正确的方法。

Now that you have looked at the demo (be honest here) how many of you thought of or understood the very first method in the demo?

既然您已经查看了该演示(在这里很诚实)，您中有多少人想到或理解了演示中的第一种方法？

This was the simplest and most basic answer and probably one of the first lessons learned and forgotten by most people and I will guess that few of you will have thought of it.

这是最简单，最基本的答案，可能是大多数人学到和忘记的第一课，我想你们当中很少有人会想到它。

.box {margin:0 0 0 auto; width:50px; height:50px;background:red;}

It looks simple enough but how does that put a box to the right of the page?

它看起来很简单，但是如何在页面右侧放置一个框？

We are all familiar with margin:0 auto which will center block elements horizontally but how does margin:0 0 0 auto; move a box to the right?

我们都熟悉margin:0 auto ，它将水平放置块元素居中，但是margin:0 0 0 auto; 向右移动一个框？

To answer this you need to refer to the specifications but a simplified example is that the width + padding + margins = width of the containing block.

要回答这个问题，您需要参考规范，但一个简化的示例是宽度+填充+边距=包含块的宽度。

Therefore, for a fixed width element that has a right margin of zero then the left margin must equal the distance left to the left edge of the containing block. This is achieved with a margin-left of auto.

因此，对于右边距为零的固定宽度元素，则左边距必须等于到包含块的左边缘的距离。 这是通过auto的margin-left的。

If instead you put a margin-left of zero then the box moves to the left side and in ltr languages the margin-right zero would then equate to auto (even if you specify zero) in order for the requirements of the box model to hold true.

相反，如果您将margin-left设置为零，那么该框将移至左侧，而在ltr语言中，margin-right零将等于auto(即使您指定了零)，以便满足box模型的要求真正。

lastly if you put a margin-left and margin-right of auto then the box becomes centered as we all know and love.

最后，如果您将auto设置为margin-left和margin-right ，则该框将居中，我们都知道并喜欢。

(I have simplified the answer so read the specs for full details and understanding.)

(我已经简化了答案，因此请阅读规格以获得完整的细节和理解。)

I mention this auto margin technique because it is a prominent technique when using flexbox and an auto margin on a flex-item will move that element to the edge of the box (whether that be left , right up or down). Incidentally it is not well known that margin:auto on an absolutely positioned element will center the element both horizontally and vertically within a fixed height and width container.

我提到了这种自动页边距技术，因为它是使用flexbox时的一项突出技术，并且在flex-item上的自动页边距会将该元素移到框的边缘(无论是向左，向右或向上或向下)。 偶然地，在绝对定位的元素上的margin:auto会在固定的高度和宽度容器内将元素水平和垂直居中并不为人所知。

That’s enough about margins anyway and have a look through the rest of the examples in the first demo and if you can think of more ways to do this then feel free to post or discuss.

无论如何，这足以满足边距的需求，并浏览第一个演示中的其余示例，如果您能想到更多实现此目的的方法，请随时发布或讨论。

If you don’t understand any of the examples then please discuss and we can clarify.

如果您不理解任何示例，请进行讨论，我们可以进行澄清。

Note that this thread isn’t simply about this first post but mainly as a talking point to keep things moving so if you have topics you wish to discuss then please go ahead.

请注意，该主题不仅是关于此第一篇文章的，而且主要是为了使事情发展而成为一个谈话要点，因此，如果您有想要讨论的主题，请继续。

I look forward to answering or being baffled by your queries. I can’t guarantee to know all the answers but I’m sure if I don’t know the answer someone else will have a good idea and chip in to the conversation.

我期待着回答或为您的查询所困扰。 我不能保证知道所有答案，但是我敢肯定，如果我不知道答案，其他人将有一个好主意并参与到对话中。

Follow this discussion further in the SitePoint forums.

在SitePoint论坛中进一步关注此讨论 。

翻译自: https://www.sitepoint.com/decoding-css-positioning/

vids:xvid解码器