为什么“负边际和浮动应用元素”重叠?

问题描述 投票:0回答:2

首先,请看一下这段代码。

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

但是我无法理解这些代码。

.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

我知道负边距具有在指定方向上移动元素的效果。但是,当您运行此代码时,主要元素似乎根本不移动。为什么是这样?

问题2

由于我们将主元素的宽度设置为100%,我理解旁边元素击中主元素并且主元素和旁边元素不能并排。

因此,我认为我们准备了一个水平宽度,可以通过应用负边距来应用旁边元素,但主要元素的背景颜色的应用方式与水平宽度为100%时相同。为什么主要元素的背景颜色不是(100% - 旁边宽度)?这一系列渲染是如何完成的?

问题3

W3.org上的哪个文档描述了这些行为?我试着看,但我找不到任何关于它们的详细信息。

谢谢。

html css html5 css3
2个回答
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%宽度但是由于负边距,侧边栏与它重叠。

现在最后一步是在main中添加边距,在这种情况下,它将减小内部元素的宽度,使总(宽度+边距)总是等于父元素的宽度(包含块)

.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>

在这种情况下,宽度由于边距而增加/减少,因为逻辑总是:qazxsw poi。

使用float和inline块之类的元素逻辑是相同的,但我们不会更改宽度,因为宽度由内容定义或显式定义。

width + margin = width of containing block
.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;
}

这里float元素的宽度由内容定义,inline-block的宽度等于<div class="container"> <div class="first"> some text here </div> <div class="second"> </div> </div>。负边距是创建重叠,父元素(包含块)的大小等于宽度+边距。


参考:

200px

8 Box model

9 Visual formatting model

上面的解释非常简化。有关完整和详细说明,请参阅规范链接。


-1
投票

来自10 Visual formatting model details的奇怪位置来自浏览器css规则

<main>

你可以使用像p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } 这样的css重置来重置它。

但是,我建议使用normalize.css。一些display: flex资源。

wonderful
© www.soinside.com 2019 - 2024. All rights reserved.