CSS布局之流动模型&&margin负值和百分比

最新推荐文章于 2020-06-07 10:00:57 发布

Jancy1072

最新推荐文章于 2020-06-07 10:00:57 发布

阅读量437

点赞数 2

分类专栏： css 文章标签： css 布局 margin

本文链接：https://blog.csdn.net/shelly1072/article/details/58318706

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

默认的网页布局模式。

文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE中浮动元素也存在于文档流中。

块级元素和行内元素（或内联元素）

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
内联元素都会在所处的包含元素内从左到右水平分布显示。

块级元素的正常流布局

这里写图片描述
一般的，一个元素的width被定义为从左内边界到右内边界，height则是从上内边界到下内边界的距离。
不同的宽度，高度，内边距和外边距相结合，就可以确定文档的布局。

水平布局

正常流中块级元素框的水平部分总和就等于父元素的 width。margin-left, border-left, padding-left, width, padding-right, border-right, margin-right之和必须是父块元素的width值。其中 margin-left, margin-right, width 可以设置成auto，设置成 auto, 会按照以上规则自动匹配到父块的宽度。默认会使让 width 尽可能的长。
例如：父元素宽800px
1. 设置margin-right为200px：margin-right为200px，width为600px，其他为0
2. 设置margin-right为200px，width为auto：margin-right为200px，width为600px，其他为0（默认会使让 width 尽可能的长。）
3. 设置margin-right为200px，width为200px，margin-left为auto：margin-right为200px，width为200px，margin-left为400，其他为0
4. 设置margin-right为200px，width为auto，margin-left为auto：margin-right为200px，width为600px，其他为0（默认会使让 width 尽可能的长。）
5. 设置margin-right为auto，width为200px，margin-left为auto：margin-right为300px，margin-left为300px，width为200px，其他为0（margin-left和margin-right平分，居中）
6. 设置margin-right为100px，width为200px，margin-left为100px：margin-right为500px，width为200px，margin-left为100px（加在一起还不够父块区域的宽度的话，会默认将margin-right设置成 auto来满足总和与父块相等的要求）

margin为负值

负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。
是负的边距好像能减小元素在文档流中的尺寸一样（父元素被撑开的没有原来大了）。

#wai{
    background-color: green;
    width: 800px;
    float: left;//这是为了形成一个BFC，避免margin塌陷
    margin-left: 100px;
}
#nei{
    background-color: red;
    height: 100px;
    width: 100px;
    margin-top: -20px;
    margin-left: -10px;
}
<div id="wai">
    <div id="nei"></div>
</div>

绿色的方块高度只有80px。
红色方块向左移了10px，向上移了20px。
这里写图片描述

```
#wai{
    background-color: green;
    width: 800px;
    float: left;//这是为了形成一个BFC，避免margin塌陷
    margin-left: 100px;
}
#nei{
    background-color: red;
    height: 100px;
    width: 100px;
    margin-bottom: -20px;
    margin-left: -10px;
}
<div id="wai">
    <div id="nei"></div>
</div>

这里写图片描述
绿色的方块高度只有80px。
红色方块向左移了10px。
一个没有设定高度的块状元素，其高度是自动的，具体来说就是由它里面的文档流最后的位置决定的。假设它里面有一个出于文档流中的子元素，高度为100px;那这时这个父元素的高度就等于子元素的高度100px了，如果子元素继续增高，那么父元素也会跟着增高。可是如果这时子元素设一个负的margin-bottom,比如-20px，因为负边距会影响到文档流，本来文档流的高度是从父元素的最顶端到子元素的最底端这段高度，现在子元素有一个margin-bottom:-20px;就相当于文档流要向上退后20px,这样整个文档流的高度就减少了20px了，那么父元素的高度也会跟着减少20px。这时子元素的高度会超出父元素。

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度：
这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）。

#wai{
    background-color: green;
    width: 800px;
    float: left;
    height: 200px;
    margin-left: 100px;
}
#nei{
    background-color: red;
    height: 100px;
    margin-left: -100px;
}

这里写图片描述
红色方块宽度900px。

负边距对绝对定位元素的影响：
绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。利用这点，就有了经典的利用绝对定位来居中的方法：

#wai{
    background-color: green;
    width: 800px;
    height: 200px;
    position: relative;
}
#nei{
    background-color: red;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -50px;//宽的一半
    margin-top: -50px;//高的一半
}

这里写图片描述

负边距对浮动元素的影响：

#wai{
    background-color: green;
    width: 800px;
    height: 200px;
    position: absolute;//形成BFC，使绿色方块撑开
}
.nei{
    background-color: red;
    height: 100px;
    width: 100px;
    float: left;
}
.nei2{
    background-color: blue;
    margin-left: -20px;
}
<div id="wai">
    <div class="nei"></div>
    <div class="nei nei2"></div>
</div>

这里写图片描述
蓝色方块覆盖到红色方框上。

关于负边距的详细资料可以参考：
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

margin百分比

margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度。

#wai{
    background-color: green;
    width: 500px;
    height: 100px;
    position: absolute;
}
.nei{
    background-color: red;
    height: 50px;
    width: 50px;
    margin-top: 10%;
    margin-left: 10%;           
}
<div id="wai">
    <div class="nei"></div>
</div>