margin负值问题

最新推荐文章于 2023-04-17 23:49:59 发布

想上天的蓝胖子

最新推荐文章于 2023-04-17 23:49:59 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/ll_0801xyz/article/details/77341633

版权

margin四值顺序

【1个值】margin: top|right|bottom|left;
【2个值】margin: top|bottom left|right;
【3个值】margin: top left|right bottom;
【4个值】margin: top right bottom left;

margin表现

block元素可以使用四个方向的margin值
inline元素使用上下方向的margin值无效
inline-block使用上下方向的margin负值看上去无效

重叠

【1】两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
【2】当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
【3】当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话，后面的元素覆盖前面的元素
总结：在普通流布局中，浏览器将页面布局分为内容和背景，内容的层叠显示始终高于背景。block元素分为内容和背景，而inline元素或inline-block元素，它本身就是内容(包括其背景等样式设置)

负值

1、原理：

设置左右margin负值会增加元素的宽度（该元素没有设定width属性或width:auto）
margin-top设置负值不会增加元素高度，只会产生向上的位移
-margin-bottom设置负值不会产生位移，只会减小元素供CSS读取的高度

2、对普通文档流中元素（指不是浮动元素也不是绝对定位、固定定位的元素等）的影响

负边距对由普通文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，这种偏移不同于相对定位（通过相对定位偏移后的元素仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入），通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对普通文档流元素的影响</title>
  <style type="text/css">
   .box{
     display: block;
     width: 400px;
     height: 200px;
     background-color: red;
   }
    span{
      background-color: aqua;
    }
    p{
      display: inline-block;
      background-color: indianred;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
 <div class="box">块状元素，位置由文档流控制</div>
 <div>
   行内元素，位置由文档流控制行内元素，位置由文档流控制行内元素，位置由文档流控制<span>行内元素，位置由文档流控制</span>
   行内元素，位置由文档流控制行内元素，位置由文档流控制行内元素，位置由文档流控制行内元素，位置由文档流控制
 </div>
 <p>inline-block元素，位置由文档流控制</p>
</body>
</html>

页面效果
这里写图片描述
给所有元素设置负边距

*{
      margin: -10px;
    }

页面效果
这里写图片描述

3、对浮动元素的影响

可以改变元素的布局显示位置，某个元素即使是写在了后面，但可以通过负边距让它在浏览器显示的时候显示在前面（圣杯布局、双飞翼布局利用此原理实现。）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对浮动元素的影响</title>
  <style type="text/css">
   div{
     float: left;
     width: 100px;
     height: 100px;
     line-height: 100px;
   }
    .one{
      background-color: salmon;
    }
    .two{
      background-color: aqua;
    }
    .three{
      background-color: yellow;
      margin-left:-200px;
    }
  </style>
</head>
<body>
  <div class="one">元素一</div>
  <div class="two">元素二</div>
  <div class="three">元素三</div>

</body>
</html>

页面效果
这里写图片描述

4、对绝对定位元素的影响（做居中）

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。
必须知道定位元素的宽高才能设置margin值做居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对绝对定位元素的影响</title>
  <style type="text/css">
    .a{
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      left:50%;
      top:50%;
      margin-left: -100px;//宽度一半
      margin-top: -100px;//高度一半
    }

  </style>
</head>
<body>
<div class="a"></div>
</body>
</html>