首先,请看一下这段代码。
我了解到这是实现液体布局的常用方法。
但是我无法理解这些代码。
.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上的哪个文档描述了这些行为?我试着看,但我找不到任何关于它们的详细信息。
谢谢。
让我们首先逐个添加属性,看看发生了什么。
最初我们有这个代码没有应用保证金,只有浮动元素:
.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
上面的解释非常简化。有关完整和详细说明,请参阅规范链接。
来自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