2021－2－01

最新推荐文章于 2024-06-01 21:43:54 发布

hanshuanga

最新推荐文章于 2024-06-01 21:43:54 发布

阅读量58

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/hanshuanga/article/details/113967253

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

margin对于各种布局的影响

左正值：margin-left的正值
一. 浮动布局
若在给定宽度下，margin-left和margin-right的正值就是向右和向左进行偏移（也就是正常的显示方式），负值就会向左和向右移动，并且会改变布局，即会对前面的浮动元素和后面的浮动元素产生影响，例如margin-left：-20px会向左偏移20像素，并且会覆盖前面的浮动元素，具体效果如下

<style>
       .box{
       	width: 600px;
       	height: 500px;
       	background-color: pink;
       	margin: 150px auto;
       }
       .box1{
       	width: 200px;
       	float:left;
       	background-color: blue;
       	height: 200px;

       }
       .box2{
       	width: 200px;
       	float:left;
       	background-color: orange;
       	height: 200px;
       	margin-left:-20px;

       }
       .box3{
       	width: 200px;
       	float:left;
       	background-color:green;
       	height: 200px;
       }
   </style>
</head>
<body>
	<div class="box">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
           <!--  <div class="box4">4</div> -->
	</div>
</body>

在这里插入图片描述
margin-right：-20px，后面的浮动元素会向前移动20像素覆盖当前的元素,给人的感觉是有盒子变小了，其实盒子本身并没有变小，只是计算元素位置的时候变小了

若是没有给定宽度，正值相对于父元素的宽度进行正常偏移，左负值会覆盖前面的元素，使自身宽度变宽，右负值后面元素会覆盖当前元素，但当前元素会变宽，效果如下

<style>
      .box{
      	width: 600px;
      	margin: 100px auto;
      	height: 200px;
      	background-color: pink;
      	/*float:left;*/
      }
      .wrap{
      /*/*	float:left;*//*注意此盒子不能浮动，因为没有宽度*/
      	/*margin-left: 50px;*/
      	/*margin:  0 50px;*/
      	margin-left:-50px;
      	height: 100px;
      	background-color: orange;
      }
      .box1{
      	width: 200px;
      	height: 100px;
      	background-color: red;
      	float:left;
      	margin-left: -50px;
      }

      .box2{
      	width: 200px;
      	height: 100px;
      	background-color: blue;
      	float:left;
      	margin-right:-50px;
      }
      .wrapBox{
      	float:left;
      	width: 200px;
      	background-color: #ccc;
      	height: 100px;

      }
      
   </style>
</head>
<body>
	<div class="box">
		     <div class="box1"></div>
              <div class="wrapBox"> 
              	<div class="wrap">
              	</div>
              </div>
            <div class="box2"></div>
            <!-- <div class="box1"></div> -->
	</div>
</body>

在这里插入图片描述二.普通文档流
给定宽度，左正值相对于父元素向右偏移，左负值相对于父元素向左偏移，通过负边距进行偏移的元素，会放弃偏移前占据的空间，这样后面的文档流中其他元素就会流过来填充这部分空间，即文档流只能向左和向上流动，margin-top正值会使包括父元素的整个大盒子向下移动，负值则相反
没有给定宽度 子元素会依据父元素而定，左正值会相对父元素向右移动，宽度会自动填充父元素的宽度减去相对于父元素所偏移的外边距值；
左负值会相对父元素向左移动，宽度自动填充父元素的宽度加相对于父元素所偏移的外边距值；
三.定位布局
有宽度下定位元素的上偏移位置是margin-top的值+top值或者margin-bottom+bottom值；左偏移的位置是margin-left+left值或者margin-right+right值
当绝对定位和上层相对定位（绝对定位，固定定位）中间夹一层标准流或者浮动的块时
只使用margin按照上层标准流或者浮动的块定位
只使用left是按照上层相对定位绝对定位的边界定位
同时使用时按上层相对定位绝对定位的边界定位，距离为两者相加值

<style>
       .box{
       	width: 500px;
       	height: 500px;
       	background-color: pink;
       	margin: 100px auto;
       	position:relative;


       }
       .box1{
       	 width: 100px;
         height: 100px;
        
       	background-color: blue;
       	margin-left: 10px;
       	position: absolute;
       	top:0px;
       	left: 15px;
       }
       .wrap{
           width: 100px;
           height: 200px;
           background-color: green;
           margin-left: 15px;
           float:left

       }
   </style>
</head>
<body>
	<div class="box">
		    <div class="wrap">
               <div class="box1">hhhahhahahh</div>
               <div class="box2"></div>
		    </div>
            <!-- <div class="box1"></div> -->
	</div>
</body>

在这里插入图片描述
简单的想到哪写哪了，若有不足之处望提出建议，见谅