css负边距之详解

最新推荐文章于 2019-04-01 21:05:23 发布

AidanDai

最新推荐文章于 2019-04-01 21:05:23 发布

阅读量1k

点赞数

分类专栏： html and css 文章标签： css

本文链接：https://blog.csdn.net/aidandai/article/details/49963959

版权

html and css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css负边距的奇技淫巧

前言：再来看看 CSS Box Model

css box model

在static元素中使用负边距

下面的图片已经说得很明白了，我们直接看代码。。。

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>static-margin</title>
        <style style="text/css">
            body{
                margin: 50px 0 0;
                padding: 0;
            }
            .margin-demo{
                width: 200px;
                height: 200px;
                margin: 0 auto;
            }
            div:first-child{
                background-color: yellow;
            }
            .second{
                background-color: #3f9;
                margin-top: -100px;
                color: #fff;
            }
            .third{
                background-color: yellow;
                margin-bottom: -100px;
                color: red;
            }
            .fifth{
                background-color: #3f9;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="margin-demo"></div>
        <div class="margin-demo second"><pre>.second{
  background-color: #3f9;
  margin-top: -100px;
  color: #fff;
}</pre></div>
        <hr />
        <div class="margin-demo third"><pre>.second{
  background-color: #3f9;
  margin-bottom: -100px;
  color: red;
}</pre></div>
        <div class="margin-demo fifth"></div>
    </body>
    </html>

在firebug下

firebug margin-top

firebug margin-bottom

原文准确的解释是这样的;非常符合firebug下的结果，仅仅移动

/* Moves the element 10px upwards */
.second{ margin-top: -100px; }

/* 
* All elements succeeding .third move up by
* 100px, while .third doesn’t even move an inch.
*/

.third{ margin-bottom:-100px; }

在chrome控制台下

chrome margin-top

chrome margin-bottom

chrome控制台下的结果确实这样的，我们难道不应该理解为他们不仅只是移动吗？确实让人匪夷所思，至于造成这个差异的原因，大家猜猜都知道了，firefox和chrome的内核是不一样的，再试就研究到这里吧，再往下去确实更难研究，那也不是在我现在所能研究的范围之内，什么时候有这个水平了再继续研究吧！

If no width is applied, adding Negative Margins to its left/right pulls the element in both directions increasing its width. It’s here that the margin acts like a padding.

至于原文的这段话，我也是百思不得姐，实验也没有结果，不知道真是情况又是怎么一回事呢？原文是July 27th, 2009写的，是前端变化的太快了，已经不能体现出来，还是理解有问题，欢迎大家留言交流！

从内容来看firebug下的更正常，因为内容并没有受影响，这样看来仅仅是移动更正确！

在float元素中使用负边距

1、

下面截取了原文的一段，我完全不知道原文作者是什么意思：

If a negative margin is applied opposite a float, it creates a void leading to the overlapping of content. This is great for liquid layouts where one column has a width of 100% while the other has a definite width, like 100px.
/* A negative margin is applied opposite the float */

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

#mydiv1 {float: left; margin-right: -100px;}

下面是我的小demo,可是跟原文作者的说法出入比较大！

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>float-margin1</title>
        <style style="text/css">
            body{
                margin: 50px auto;
                padding: 0;
                width: 500px;
            }
            /* A negative margin is applied opposite the float */
            #mydiv1 {
                float:left;
                background-color: #09f;
                opacity: 0.4;
                margin-right: -100px;
                width: 100%;
                height: 300px;
                color: #fff;
            }
            #mydiv2{
                background-color: #39f;
                opacity: 0.6;
                width: 100px;
                height: 300px;
                color: #000;
            }
            #mydiv2{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="mydiv1">First</div>
        <div id="mydiv2">Second</div>
    </body>
    </html>

贴上demo截图:

negative margin and oppositive float

2、

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>float-margin2</title>
        <style style="text/css">
            body{
                margin: 50px auto;
                padding: 0;
                width: 500px;
            }
            .demo-box{
                width: 300px;
                height: 100px;
                background-color: #000;
                opacity: 0.5;
            }
            .demo-box1{
                width: 300px;
                height: 100px;
                background-color: #000;
                opacity: 0.5;
            }
            .float-margin{
                float: left;
                width: 100px;
                height: 100px;
            }

            .demo-box div:first-child{
                margin-left: -20px;
                background-color: #09f;
            }
            .demo-box .second{
                margin-left: -20px;
                background-color: #3f9;
            }
            .demo-box div:last-child{
                margin-left: -20px;
                background-color: red;
            }

            .demo-box1 div:first-child{
                margin-right: -20px;
                background-color: #09f;
            }
            .demo-box1 .second{
                margin-right: -20px;
                background-color: #3f9;
            }
            .demo-box1 div:last-child{
                margin-right: -20px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="demo-box">
            <div class="float-margin">
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
            </div>
            <div class="float-margin second">
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
            </div>
            <div class="float-margin">
                hello!
                hello!
                hello!
                hello!
                hello!
                hello!
            </div>
        </div>
        <hr />
        <div class="demo-box1">
            <div class="float-margin">
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
            </div>
            <div class="float-margin second">
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
            </div>
            <div class="float-margin">
                hello!
                hello!
                hello!
                hello!
                hello!
                hello!
            </div>
        </div>
    </body>
    </html>

如果元素同时向左浮动，并且设置负的左外边距，那么这些元素统一左移相应的值，内容会向右移相应的值（相对运动,这时的负外边距对文本来说相当于正内边距），从css的3d盒子模型来看，那就不仅仅是元素的移动了，还影响到了内容。。。（如图分割线以上）
如果元素同时向左浮动，并且设置负的右外边距，那么这些元素统一左移相应的值（除了第一个元素），并且覆盖左面元素在该位置的的值。。。从css的3d盒子模型来看，那么便仅仅是移动(如图分割线以下)

left and margin

如果你觉得不知所云(其实我觉得我说的也不是太清楚)，请复制代码到你喜欢的编辑器并运行它！

常用的几个实例

一列变成多列

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>float-margin1</title>
        <style style="text/css">
            body{
                margin: 100px auto;
                padding: 0;
                width: 500px;
            }
            ul {list-style:none;}
            li {line-height:1.3em;}
            .col2 {margin-left:100px;}
            .col3 {margin-left:200px;}
            .top {margin-top:-2.6em;} /* the clincher */
        </style>
    </head>
    <body>
        <ul>
            <li class="col1">Eggs</li>
            <li class="col1">Ham</li>
            <li class="col2 top">Bread</li>
            <li class="col2">Butter</li>
            <li class="col3 top">Flour</li>
            <li class="col3">Cream</li>
        </ul>
    </body>
    </html>

原理如下图：

三列等高布局

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>float-margin1</title>
        <style style="text/css">
            .container{
                margin: 50px auto 0;
                width: 1000px;
                overflow: hidden;
            }
            .left,
            .center,
            .right{
                float: left;
                margin-bottom: -10000px;
                padding-bottom: 10000px;
                width: 33.333%;
            }
            .left{
                background-color: #00ffba;
            }
            .center{
                background-color: #edff66;
            }
            .right{
                background-color: #c9f;
            }
            .footer{
                margin: 0 auto;
                background-color: #ccc;
                width: 1000px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
            </div>
            <div class="center">
               hello world!<br />
               hello world!<br />
               hello world!<br />
            </div>
            <div class="right">
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
                hello world!<br />
            </div>
        </div>
        <div class="footer"></div>
    </body>
    </html>