Question

首先，请看下面的代码。

我了解到这是实现液体布局的一种常见方法。

但是我看不懂其中一些代码。

.container {
    overflow: hidden;
}

main {
    float: left;
    width: 100%;
    margin-right: -340px;
    background: red;
}

.main-inner {
    margin-right: 340px;
    background: blue;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}

<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

问题1

我知道负边距具有沿指定方向移动元素的作用。但是，当您运行此代码时，main元素似乎根本没有移动。为什么会这样？

问题2

由于我们将主元素的宽度设置为100％，所以我知道aside元素会碰到main元素，并且main元素和aside元素不能并排放置。

因此，我认为我们准备了一个水平宽度，该宽度可以通过应用负边距来应用旁白元素，但是主要元素的背景色的应用方式与水平宽度为100％时相同。为什么主要元素的背景色不是（100％-预留宽度）？这一系列的渲染如何完成？

问题3

W3.org上的哪个文档描述了这些动作？我尝试查找，但是找不到关于它们的任何详细信息。

谢谢。

Answer 1

让我们先逐个添加属性，然后看看发生了什么。

最初，我们使用以下代码，未应用任何边距，仅使用浮点元素：

.container {
    overflow: hidden;
    background:yellow;
}

main {
    float: left;
    width: 100%;
    background: red;
}

.main-inner {
    background: blue;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}

<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

很明显，您将红色元素width:100%浮动在左侧，将绿色元素浮动在右侧，具有固定的宽度。您可能还会注意到p元素具有默认边距，这就是蓝色未完全覆盖红色的原因。

现在，如果您添加负数margin-right，您将不会移动元素或减小宽度，但会从右侧拉内容以重叠元素。这是一个基本的图示：

.box {
  width: 200px;
  height: 200px;
  background: red;
  float: left;
}

<div class="box" style="margin-right:-100px;height:220px">

</div>
<div class="box" style="background:blue;">

</div>

您可以看到，蓝色框与红色框完全重叠，100px是因为我们将-100px应用于红色框的margin-right。在您的情况下，将发生相同的逻辑，您将负边距设置为等于边栏的大小，因此您创建了将边栏移动到与主元素相同高度的必要空间。

.container {
    overflow: hidden;
    background:yellow;
}

main {
    float: left;
    width: 100%;
    background: red;
    margin-right:-340px;
}

.main-inner {
    background: blue;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}

<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

因此主要元素仍为100％宽度，但由于负边距，侧边栏与它重叠。

现在，最后一步是在主体内部添加边距，在这种情况下，它将减小内部元素的宽度，以使总（宽度+边距）始终等于父元素（包含块）的宽度< / p>

.container {
    overflow: hidden;
    background:yellow;
}

main {
    float: left;
    width: 100%;
    background: red;
    margin-right:-340px;
}

.main-inner {
    background: blue;
    margin-right:340px;
}

.sidebar {
    float: right;
    width: 340px;
    background: green;
}

<div class="container">
    <main>
        <div class="main-inner">
            <p class="main-title">Main</p>
        </div>
    </main>
    <aside class="sidebar">
        <div class="sidebar-inner">
            sidebar
        </div>
    </aside>
</div>

这是块元素未浮动的边距的另一个说明：

.container {
  border: 2px solid;
  max-width: 50vw;
  margin: auto;
}

.first {
  height: 100px;
  background: red;
  margin: 0 -50px;
}

.second {
  height: 100px;
  background: blue;
  margin: 0 50px;
}

<div class="container">
  <div class="first">
  </div>
  <div class="second">
  </div>
</div>

在这种情况下，宽度由于边距而增加/减少，因为逻辑总是：width + margin = width of containing block。

对于float和inline块这样的元素，逻辑是相同的，但是我们不会更改宽度，因为宽度是由内容定义的，还是由显式定义的。

.container {
  border: 2px solid;
  display:inline-block;
}

.first {
  float:left;
  height: 100px;
  background: red;
  margin-right:-50px;
}

.second {
  display:inline-block;
  width:200px;
  height: 120px;
  background: blue;
  margin-top:20px;
  margin-right:-100px;
}

<div class="container">
  <div class="first">
    some text here
  </div>
  <div class="second">
  </div>
</div>

此处，float元素的宽度由内容定义，内联块的宽度等于200px。负边距会造成重叠，并且父元素（包含块）的大小等于width + margins。

参考：

8 Box model

9 Visual formatting model

10 Visual formatting model details

^{上面的解释非常简单。请参阅规范链接以获取完整和详细的说明。}

Answer 2

Traceback (most recent call last): File "calibration.py", line 8, in <module> from . import _const ImportError: cannot import name '_const'中的奇数位置来自浏览器的css-rule

val run = new g.Run

您可以使用normalize.css之类的CSS重置来重置它。

但是，我建议使用<main>。一些wonderful资源。

p {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

为什么“负边距和浮动应用的元素”重叠？

2 个答案: