关闭

css负边距之详解

标签: css
260人阅读 评论(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>

巧妙地运用了负的margin-bottom会让下面的元素向上移这一特性,完成了三列等高布局,当然也离不开float和overflow的作用。。。

博文参考:
- 原文一
- 原文一译文
- 原文二

感谢参考博文作者!

结束语:

今天不想跑,所以才去跑,这才是长跑者的思维方式!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13533次
    • 积分:467
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:14篇
    • 译文:0篇
    • 评论:0条