码迷,mamicode.com
首页 > 其他好文 > 详细

margin负值

时间:2014-05-31 04:38:47      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

    css中常常会见到margin-left:-20px;这类,有点晕,所以整理一下~

    主要分为两种情况:

    一、没有浮动的元素   

bubuko.com,布布扣
/* mydiv1向上移动10px */

#mydiv1 {margin-top:-10px;}

/* mydiv1向左移动10px */

#mydiv1 {margin-left:-10px;}

/* 
*mydiv1不动,它相邻的元素向上移动10px,覆盖了mydiv1
*/

#mydiv1 {margin-bottom:-10px;}

/* 
*mydiv1不动,它相邻的元素向左移动10px,覆盖了mydiv1
*/

#mydiv1 {margin-right:-10px;}
bubuko.com,布布扣

    如果该元素没有设置width,则负边距会增加它的宽,margin-right负值就是右边变宽,左边同理。

    二、浮动元素

    没有使用负值前:

bubuko.com,布布扣
1 <div id="left" style="width:250px;height:250px;float:left;background-color:red;"></div>
2 <div id="right" style="width:250px;height:250px;float:left;background-color:green;"></div>
bubuko.com,布布扣

 bubuko.com,布布扣

    使用负值margin-right以后(覆盖):

bubuko.com,布布扣
 <div id="left" style="width:250px;height:250px;float:left;background-color:red;margin-right:-50px"></div>
  <div id="right" style="width:250px;height:250px;float:left;background-color:green;"></div>
bubuko.com,布布扣

bubuko.com,布布扣

   

    使用负值margin-left以后(与上面的区别就是,这次div left移动了。。。):

bubuko.com,布布扣

   着急下班,下次有时间再补充些。。。

margin负值,布布扣,bubuko.com

margin负值

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/missuu/p/3761604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!