初识负外边距在布局中的影响(1):基础理论

1.引言

开篇前需声明一点:本人前端的菜鸟一枚,也是在自学的过程中碰到了负边距(Negative Margin)布局问题,所以花了近一天的时间去找资料写Demo测试,文章是我综合其他大牛的思路而成,目的并不在于向诸位“传道”,而主要是为了方便自己以后查阅复习,当然如果能够帮到你那就更好了。文中若有错误,欢迎指正,不必留情。

2.负外边距的表现

有人说div+css布局方式主要有三种:

  1. 浮动(float:left;float:right)
  2. 定位(绝对定位:absolute;相对定位:relative)
  3. 负边距(margin:-100px);

这种说法我也不知道对不对(毕竟是菜鸟),但是可以肯定的是既然有这种说法,足见负外边距对于布局的影响还是挺大的,或者在某些特定的布局中需要依仗它。下面将从两个方面通过代码示例来说明负外边距的表现:

2.1 对于静态元素的影响

这里所谓的静态元素指的的没有脱离文档流的元素,它在页面位置是跟随文档流变化而变化的。不妨看看下面这个示例:
这里写图片描述

    <div class="container">
        <div class="top"></div>
        <span class="behind">君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。<span class="inner">岑夫子,丹丘生,将进酒,杯莫停。</span>与君歌一曲,请君为我倾耳听。钟鼓馔玉不足贵,但愿长醉不复醒。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。主人何为言少钱,径须沽取对君酌。五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。</span>
    </div>

    <style type="text/css">
        body,div,p{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 500px;
            height: 400px;
            margin: 100px auto;
            font-size: 18px;
            border: 1px solid #0094ff;
        }
        .top{
            width: 500px;
            height: 100px;
            background-color: yellowgreen;
            /*
            margin-top: -50px;
            margin-left: -50px;
            margin-right: -50px;
            margin-bottom: -50px;
            */
        }

        /*
        .inner{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: royalblue;
            color: white;

            margin-right: -50px;
            margin-bottom: -50px;
        }
        */
    </style>

如果给上面的黄绿色div块(.top)分别加上负外边距看看有什么效果:
(1)margin-top: -50px; 很显然div块往上挪动了50px,后面的span标签里面的文字流也跟着往上挪动50px。
这里写图片描述
(2)margin-left: -50px;div块往左边挪动了50px,后面的span标签内容与位置没有发生变化
这里写图片描述
(3)margin-right: -50px;直接加似乎看不出效果,如果把上面的div块改成display: inline-block;就可以看出效果,div的位置和大小都没有发生变化,但是后面的“文字流”顶上去了。
这里写图片描述
(4)margin-bottom: -50px;“文字流”整体上挪,但是div块的大小和位置依然没变
这里写图片描述

说明:上面4种负边距的设置,个人认为margin-top和margin-left负边距好理解,就是把元素向上和向左移动,但是margin-right和margin-bottom负边距并不是把元素向右和向下移动,因为文档流只能向上或者向左流动。我对于margin-right和margin-bottom负边距的理解就是它会把元素的文档流边界向左或者向上挪动,而元素的位置和大小不变(见下图),这也解释了为什么margin-right: -50px和margin-bottom: -50px;的文档流都向左和向上流动从而压盖住了原有的div块。
这里写图片描述

这里写图片描述

此外,对于没有设置宽度(width:auto也可以)的元素,margin-left和margin-righ的负边距会增加元素的宽度。

    <div class="container">
        <div class="content"></div>
    </div>

    .container{
       width: 400px;
       height: 200px;
       margin: 100px auto;
       border: 1px solid salmon;
   }
   .content{
       height: 100px;
       background-color: seagreen;
       margin-left: -100px;
       margin-right: -150px;
  }

这里写图片描述

2.2 对于浮动元素的影响

实际上负边距对于浮动元素的影响和静态元素是类似的,可以想象浮动的元素也会有一个“浮动流”,类似文档流,四个方向的负边距的影响和静态元素是一样的,看下面的示例:

    <div class="container">
        <div class="div-one">div1</div>
        <div class="div-two">div2</div>
        <div class="div-three">div3</div>
    </div>

.div-one,.div-two,.div-three{
            width: 200px;
            height: 200px;
            float: left;
            color: white;
            font-size: 18px;
        }
        .container{
            width: 900px;
            height: 600px;
            margin: 100px auto;
            border: 1px solid salmon;
        }
        .div-one{
            background-color: seagreen;
            margin-left: -50px;
            margin-top: -50px;
        }
        .div-two{
            background-color: slateblue;
            margin-right: -50px;
        }
        .div-three{
            background-color:saddlebrown;
        }

这里写图片描述
div1块向上和向左挪动,后面的“浮动流”跟上,而div2的浮动流边界向左收缩,所有div3不管div2的实际大小,直接压盖上来。

说到负边距浮动布局,这里有小小的Demo:
这里写图片描述

    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

父元素的宽度和每个li的宽度是固定的,常规操作全部浮动,通过计算给定每个li一个margin-right值,第3,6,9个元素会被相应的“挤下来”,这里或者js代码计算一下,选出3,6,9元素去掉margin-right值,就可以达到效果。实际上呢,完全可以通过负边距来给li的无宽父元素增加一个margin-right负边距使得3,6,9“正位”,然后把超出的部分隐藏。

    ul,li{
            list-style: none;
        }
        .container{
            height: 320px;
            width: 320px;
            margin: 100px auto;
            border: 1px solid #0094ff;
        }
        ul{
            height: 320px;
            overflow: hidden;
            margin-right: -10px;
            /*对于无宽的父元素margin-right:-10px会使得父元素向右伸展10px,从而有足够的空间容纳3,6,9元素*/
        }
        li{
            height: 100px;
            width: 100px;
            background-color:salmon;
            color: white;
            font-size: 18px;
            margin: 0 10px 10px 0;
            float: left;
        }
3.总结

语言表达能力和水平有限,啰嗦了半天也总觉得没有说清楚。不过我觉的这个需要自己写几个Demo去体会一下,尤其是对margin-right和margin-bottom负边距的理解,这个很重要。后续的篇章中会基于本篇中的理论来展开,主要是使用负边距的一些布局,其中包括著名的“圣杯布局”和“双飞翼布局”,未完待续哦!

4.参考文章
  1. css布局奇淫巧计之强大的负边距
  2. css负边距详解
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值