卫莱仕商城系统开发程序

Margin 也可以卫莱仕商城系统开发（T：I8O-285I-O282）

通常，元素的布局尺寸是由 Content、Padding 和 Border 三个区域决定，而我们使用 margin，最常见的作用就是在空间上隔离自身与其他元素。但是，如果元素的宽高具有" 流动性(1) "，margin 也可以改变元素的布局尺寸。

*(1)可以参考： 宽度的流动性与包裹性

例子：

<style>
    div {
        width: 200px;
        background: #ccc;
    }
    
    p {
        margin: 10px;
        background: #FFEB3B;
    }
</style>

<div>
    <p>hello</p>
</div>

例子中，我们可以看到，由于 margin 设置了 10px 的值，p 元素的宽度变为 180px。
反过来，如果将 margin 值设置为负数(2)，就可以增加 p 元素的可用宽度。

*(2)margin 的值可以是负数，也可以是百分比。如果是百分比值，和 padding 属性一样，四个方向都是基于其所在包含块宽度计算的。

例子：

<style>
    div {
        width: 200px;
        background: #ccc;
    }
    
    p {
        margin: -10px;
        background: #FFEB3B;
    }
</style>

<div>
    <p>hello</p>
</div>

多列布局

利用 margin 改变元素尺寸的这个特性，可以很方便地实现两列或多列布局:

例子：

<style>
    div {
        overflow: hidden;
    }
    
    span {
        background: darkmagenta;
        float: left;
        width: 50px;
        height: 100px;
    }
    
    p {
        margin: 0;
        margin-left: 60px;
        background: #FFEB3B;
    }
</style>

<div>
    <span></span>
    <p>白居易的诗虽浅显易懂，诗味却很浓郁，艺术成就极高，有《白氏长庆集》。</p>
</div>

Margin 合并

在标准文档流中，块级元素在垂直方向上会发生 margin 合并的现象，具体可以分为以下三种情况：

1、上下相邻的两个块级元素会发生外边距合并。

例子：

<style>
    p {
        margin: 15px 0;
    }
</style>

<p>AAA</p>
<p>BBB</p>

例子中，我们可以看到，第一个 p 元素和第二个 p 元素之间的距离是 15px，说明第一个 p 元素的 margin-bottom 与第二个 p 元素的 margin-top 合并在一起了，并非上下相加。

2、父块级元素与第一个、最后一个子块级元素会发生外边距合并。

例子：

<style>
    div {
        background: #eee;
    }
    
    p {
        margin: 15px 0;
    }
</style>

<div>
    <p>AAA</p>
    <p>BBB</p>
</div>

例子中，我们可以看到，虽然父元素 div 没有设置外边距，但第一个子元素 p 的 margin-top 与最后一个子元素 p 的 margin-bottom，全部作用在了父元素身上，导致父元素上下外边距皆为 15px。

3、空块级元素自身会发生外边距合并。

例子：

<style>
    div {
        background: #eee;
        overflow: hidden;
    }
    
    p {
        margin: 15px 0;
    }
</style>

<div>
    <p></p>
</div>

例子中，为了方便观察，我们为 p 元素设置了父元素 div。元素 div 的高度为 15px，说明空元素 p 的 margin-top 和 margin-bottom 合并在一起了。

合并的计算规则

可以简单总结为" 正正取其大，负负取其小，正负就相加 "。

例子1：正正取其大

<style>
    p {
        height: 20px;
        background: #00BCD4;
        margin: 0;
    }
    
    p:first-child {
        margin-bottom: 15px;
    }
    
    p:last-child {
        margin-top: 30px;
    }
</style>

<p></p>
<p></p>

作者：为爱心太软
链接：http://www.imooc.com/article/296086
来源：慕课网
本文首次发布于慕课网 ，转载请注明出处，谢谢合作

来源：https://www.cnblogs.com/HDQ0/p/11956675.html