欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 >

领略并运用CSS的负margin值

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

本文样式代码回收 SCSS。
赏识器兼容性为 IE6+。

你的网页中,不行能没有行使过 margin。大大都环境下,我们回收的都是正数的 margin 值,也许偶然辰会用到负的 margin 值。在我们的印象中,负的 margin 值就相同于赏识器的 hack 一样,不被人接管。可是,本文要声名的就是,负的 margin 值并不是 hack,这是正常范畴内的写法。

Negative values for margin properties are allowed, but there may be implementation-specific limits. —— W3C

按照 W3C,margin 是可以或许接管负值的,只是在详细实现上有一些区别。

那么,配置 margin 为负值毕竟会是什么样的结果呢?

与配置正值差异,margin 配置负值必要按照配置的偏向以及元素是否浮动以及其定位方法来判定最终的举动。

以是,详细举动凭证以下几种环境声名。

第一种环境:元素没有配置浮动且没有配置定位可能 position 为 static

假如元素没有配置浮动而且没有配置定位可能 position 属性为 static 的环境下,对元素的 margin 配置负值会有以下的结果:

配置的 margin 的偏向为 top 可能 left

当配置负值的 margin 的偏向为 top 可能 left 的时辰,元素会凭证配置的偏向移动响应的间隔。

好比,配置 margin-left: -100px;。 那么,元素会往左移动 100px。对付配置 margin-top 也是一样的原理。

配置的 margin 的偏向为 bottom 可能 right

当配置负值的 margin 的偏向为 bottom 可能 right 的时辰,元素自己并不会移动,元素后头的其他元素会往该元素的偏向移动响应的间隔,而且包围在该元素上面。

好比,配置 margin-right: -100px;。那么,元素自己并不会移动,后头的元素会向左移动 100px 到该元素上。对付配置 margin-bottom 也是同样的原理。

同时,在元素不指定宽度的环境下,假如配置 margin-left 可能 margin-right 为负值的话,会在元素对应的偏向上增进其宽度。结果就和配置 padding-left 可能 padding-right 一样。

第二种环境:元素没有配置浮动且 position 为 relative

假如元素没有配置浮动,可是配置了相对定位,配置 margin 为负值的时辰,示意如下:

配置的 margin 的偏向为 top 可能 left

当配置负值的 margin 的偏向为 top 可能 left 的时辰,元素也会凭证配置的偏向移动响应的间隔。

配置的 margin 的偏向为 bottom 可能 right

当配置 margin-bottom/left 的时辰,元素自己也不会移动,元素后头的其他元素也会往该元素的偏向移动响应的间隔,可是,该元素会包围在后头的元素上面 (虽然,此处说的环境必定是后头的元素没有配置定位以及 z-index 的环境)。

第三种环境:元素没有配置浮动且 position 为 absolute

假如元素没有配置浮动,可是配置了绝对定位,配置 margin 为负值的时辰,示意如下:

配置的 margin 的偏向为 top 可能 left

当配置负值的 margin 的偏向为 top 可能 left 的时辰,元素也会凭证配置的偏向移动响应的间隔。

配置的 margin 的偏向为 bottom 可能 right

因为配置绝对定位的元素已经离开了尺度文档流,以是,配置 margin-right/bottom 对后头的元素并没有影响。更多出色内容存眷微信公家号:全栈开拓者中心(admin10000_com)

第四种环境:元素配置了浮动

必定没有既配置了浮动又配置绝对定位的环境,那样太荒诞了。
配置了浮动的元素,再配置 postion: relative; 的话,元素的举动和单独配置 float 是一样的。

对付配置了浮动的元素,配置 margin 为负值的时辰,示意如下:

假如配置的 margin 的偏向与浮动的偏向沟通,那么,元素会往对应的偏向移动对应的间隔。

好比:

.elem {
    float: right;
    margin-left: -100px;
}

该元素则会向右移动 100px。

假如配置 margin 的偏向与浮动的偏向相反,则元素自己不动,元素之前可能之后的元素会向钙元素的偏向移动响应的间隔。

好比:

.elem { float: right; margin-left: -100px; }

位于该元素左边的元素则会向右移动 100px,同时包围在该元素上。

假如后头的元素也配置了浮动的话,我们以一个详细的例子来声名。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
.container {
    min-height: 300px;
    margin: 30px auto;
    overflow: hidden;
    border: 1px solid #000000;

    .left {
        float: left;
        width: 400px;
        height: 200px;
        margin-right: -300px;
        background: purple;
    }

    .right {
        float: left;
        width: 300px;
        height: 200px;
        background: #cccccc;
    }
}

.left 和 .right 都配置了浮动,在 .left 上配置了 margin-right: -300px;,那么,.right 会向左移动 300px,从而包围在 .left 上。这种举动与没有既没有配置浮动也没有配置定位的示意相同。

到此,我们把配置负 margin 的各类环境以及在各类环境下的示意都或许相识了一遍。那么,我们真正运用到现实中会是什么样子呢。

半遮挡的问题

包涵我语言欠好,或许就是下图的结果:

明确并运用CSS的负margin值

凭证一样平常的头脑,必定是直接给 title 配置绝对定位,然后再将其调解已往。

可是,凭证我们此刻所说的,着实很简朴就能实现这个结果。

这里只写了首要部门的代码。

<div class="title">Hey This is title!</div>
<div class="content">Hah! This is content.</div>
.title {
    position: relative;
    width: 200px;
    height: 60px;
    margin-bottom: -30px;
    margin-left: -20px;
    background: #000000;
}

.content {
    max-width: 800px;
    height: 400px;
    padding: 0 50px;
    background: yellow;
}

我们为 title 配置了两个 margin 的负值,别离是 margin-bottom: -30px;,以及 margin-left: -20px;。

配置 margin-bottom 是为了让 content 向上移动,配置 margin-left 是为了让 title 向左移动一小段间隔。

尚有个必要留意的处所就是,必要给 title 配置 position: relative;,按照我们的第二种环境所说的,这样,才气担保 title 包围在 content 之上。

简朴的一列定宽的两列流式机关

按照我们的最后一种环境,通过配置 margin 为负值,我们可以很轻易的实现一列定宽的两列流式机关。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
.left {
    float: left;
    width: 100%;
    height: 200px;
    margin-right: -300px;
    background: purple;
}
.right {
    float: left;
    width: 300px;
    height: 200px;
    background: #cccccc;
}

独一必要留意的处所就是配置了 100% 宽度的元素上的 margin 负值的绝对值必然要和定宽的元素的宽度沟通。更多出色内容存眷微信公家号:全栈开拓者中心(admin10000_com)

双方牢靠,中间自顺应的三列机关

这是一个很老的话题了,早年也有各类实现的方法,好比双飞翼机关,可能圣杯机关。

我们此处就以双飞翼机关来作示例。

先配置页面布局:

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

此处我们没有把 center 放在中间,详细缘故起因后头会表明。

然后,我们配置这三列都浮动:

.left,
.right,
.center {
    float: left;
    height: 500px;
}

同时为他们指定宽度:

.left {
    width: 300px;
    background: #000000;
}

.right {
    width: 400px;
    background: #00FFFF;
}

.center {
    width: 100%;
    background: #93c759;
}

此刻我们要让 left 在左边,相等于就是让它包围在 center 的上面,以是,只必要这样一句:

margin-left: -100%;

同时,要让 right 在右边,同理,这样配置:

margin-left: -400px;

留意,此处的 margin 值的绝对值与 right 的宽度值沟通。

着实,这样配置,我们的三列机关就根基完成了。

那么,我们为什么要把 center 放在 left 和 right 之前呢?

这个着实涉及到元素的堆叠次序的常识 (这里就不具体讲授了,后头偶然刻的话专门拿一篇文章来讲授吧),此处简朴声名一下。

因为我们的三列都配置了浮动,以是,从某种意义上说,它们三个是在统一个平面的 (相等于z-index 沟通),那么,这里就不能按照 CSS 来判定堆叠次序了。以是,此处的 HTML 布局就抉择了它们的堆叠次序:所谓其后居上。

我们要让 left 在 center 之上,以是,必定必要让 left 元素放在 center 之前。

以是,三列机关完备的 SCSS 代码如下:

.container {
    overflow: hidden;

    .left,
    .right,
    .center {
        float: left;
        height: 500px;
    }

    .left {
        width: 300px;
        margin-left: -100%;
        background: #000000;
    }

    .right {
        width: 400px;
        margin-left: -400px;
        background: #00FFFF;
    }

    .center {
        width: 100%;
        background: #93c759;
    }
}
本文地址:http://itbyc.com/web/13192.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1