做有态度的前端团队

网易FEG前端团队

负margin小结

关于负margin

对负边距使用恰当的话,其实它是具有非常强大的属性的,以下是几条关于负margin需要注意的地方:

  • 负边距是绝对标准的css,并不是一种hack的方法
  • 当没有使用浮动时,负边距不会破坏页面的文档流
  • 浮动会影响负边距的使用,因此使用负边距的时候要小心

使用负边距,做了几个小demo

1.两个设置了固定高宽的div,分别是A,B
1.png

2.A设置margin-left为负值,如图A元素向左移了10像素
2.png

3.A设置margin-top为负值,如图A元素向上移了10像素,其父元素也向上移了10px
i30.png

4.A设置margin-bottom为负值时,A并不会像你想的那样往下移动,而是A的后续元素B拖了进来,覆盖了原来的元素A的背景
4.png

5.浮动元素上使用负边距
A设置了宽度,margin-left = -(width + border + padding), 这使A元素的宽度变成了0

image_20161008175019.png

使用负边距和float制作两栏布局

方式一:

1.主容器设置margin-right的值为r-div右侧固定宽度容器的宽度
2.左侧自适应容器l-div宽度设置为100%,并且左浮动
3.右侧固定宽度容器r-div右浮动,margin-right设置为负的自己的宽度
4.要清除浮动,避免父元素高度坍塌

html:

<div class="demo clr">
    <div  class="l-div"><div class="l-div-content">A</div></div>
    <div class="r-div">B</div>
</div>

css:

.demo{
    margin-right: 100px;
    font-size: 40px;
    text-align: center;
}

.demo .l-div{
    float: left;
    width: 100%;
    height: 200px;
    background: #23b0eb;
}


.demo .r-div{
    float: right;
    margin-right: -100px;
    width: 100px;
    height: 100px;
    background: #ff4dff;
}

方法二:

1.左侧容器l-div设置宽度为100%,margin-right为r-div的宽度的负值,并且左浮动
2.左侧内容容器l-div-content,,margin-right设置为右侧的宽度
3.右侧容器右浮动
4.要清除浮动,避免父元素高度坍塌

html:

<div class="demo clr">
    <div  class="l-div"><div class="l-div-content">A</div></div>
    <div class="r-div">B</div>
</div>

css:

.demo .l-div{
    float: left;
    margin-right: -100px;
    width: 100%;
    min-height: 200px;
    background: #000; 
}

.demo .l-div-content{
    margin-right: 100px;  
    width: auto;
    min-height: 200px;
    background: #23b0eb;
}

.demo .r-div{
    float: right;
    width:100px;
    height: 250px;
    background: #ff4dff;
}

关于width:auto 和 width:100%

  • width:auto 是包括margin-left和margin-right的值的,就是总是占据整行,但当该元素设置为浮动时,该元素的宽度就成了内容的宽度,由内容撑开,也就是有了包裹性。
  • width:100% 是不包括margin-left和margin-right的值的,是相对于父对象的。

手机阅读请扫描下方二维码:

none

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif