margin布局

1. margin 与百分比单位
2. margin重叠
3. margin重叠的三种情况
4. margin重叠的计算
- margin重叠的意义.
5. css 中的margin:auto;
6. margin负值的应用:
7. margin无效解析

1. margin 与百分比单位

1.1. 普通元素的百分比margin都是相对于父容器宽度计算的.
1.2. 绝对定位(position:absolute)元素的百分比margin是相对于本元素外层的第一个定位祖先元素(relative/absolute/fixed)宽度计算的.

/*绝对定位元素百分比案例*/
<style>
    *{margin: 0;padding: 0;}
    .grandfather{position: absolute;width: 700px; height: 1000px;}
    .father{width: 600px; height: 900px; background-color: yellow;position: absolute;}/*去掉这里的position看看*/    
    .son{width: 10px;height: 10px; margin: 50%;background-color: green;position: absolute;}
</style>
<div class="grandfather">
       <div class="father">
           <div class="son"></div>
       </div> 
</div>

2. margin重叠

什么是margin重叠? 用例子说明:

<style>
    *{margin: 0;padding: 0;}
    .box1,.box2,.box3,.box4{width: 100px;height: 100px; background-color: red;}
    .box1{margin-bottom: 20px;}
    .box2{margin-top: 20px;margin-bottom: 20px;}
    .box3,.box4{float: left;margin: 0 20px;}
</style>
   <div class="box1">box1</div>
   <div class="box2">box2</div>
   <div class="box3">box3</div>
   <div class="box4">box4</div>

思考一个问题:为什么box1和box2的边距只有20,而box3和box4的边距有40?

3. margin重叠的三种情况

3.1. 相邻的兄弟元素
3.2. 父级和第一个/最后一个子元素
3.3. 空的block元素
第三种情况特殊说明:

<style>
    *{margin: 0;padding: 0;}
    .father{background-color: red;overflow: hidden;}
    .son{margin: 1em 0;}
</style>
   <div class="father">
<!--       <div class="son">111</div>-->
       <div class="son"></div>
   </div>

margin重叠的条件以及解决办法

父子margin-top重叠:

1.父元素非块状格式化上下文元素(没有加overflow:hidden);
2.父元素没有border-top设置
3.父元素没有padding-top设置
4.父元素和第一个子元素之间没有inline元素分隔.

父子margin-bottom重叠:

1.父元素非块状格式化上下文元素(没有加overflow:hidden);
2.父元素没有border-bottom设置
3.父元素没有padding-bottom设置
4.父元素和最后一个子元素之间没有inline元素分隔
5.父元素没有height min-height max-height 限制

相邻元素margin重叠的条件

1.相邻的元素不能是inline-block元素
2.相邻的元素不能设置float;
3.元素不能设置绝对定位.

空block元素 margin重叠其他条件

1.元素没有border设置
2.元素没有padding设置
3.里面没有inline元素
4.没有height,或和min-height

4. margin重叠的计算

7.1. 正正取大值
7.2. 正负值相加
7.3. 负负最负值

margin重叠的意义.

1.连续段落或列表之类,如果没有margin重叠,排版会不自然.
2.web中任何地方嵌套或直接放入任何裸div,都不影响原来的布局.
3.遗落的空任意多个<p>元素,不影响原来的阅读排版.
总结:margin重叠是有其价值的.只有当margin重叠妨碍了我们布局,我们才考虑消除它.

5. css 中的margin:auto;

margin:auto会自动填充,也就是自动填充剩余空间.
margin-left:auto;margin-right:auto;左右平分填充了剩余空间.实现了水平居中效果.
有没有考虑过垂直居中怎么办?
举例:

<style>
    *{margin: 0;padding: 0;}
    .father{width: 1000px;height: 500px; background-color: green;position: relative;}
    .son{width: 100px; height: 50px; background-color: red;position: absolute;top: 0;right: 0; bottom: 0;left: 0; margin: auto}
</style>
<div class="father">
    <div class="son"></div>
</div>

6. margin负值的应用:

margin是可以改变元素宽度的.有两个前提.

6.1. margin负值下的两端对齐. 原理是利用了margin可以改变元素宽度这一特性实现的.

<style>
    *{margin: 0;padding: 0;}
    .container{width: 570px; height: 100px;margin-left: 50px;background-color: red; }
    .row{margin-left: -15px; margin-right: -15px;}
    .container .col{width: 120px;height: 80px; margin: 10px 15px; background-color: antiquewhite;float: left}
</style>
<div class="container">
      <div class="row">
          <div class="col"><img src="1.png" alt="" width="100%"></div>
          <div class="col"><img src="1.png" alt="" width="100%"></div>
          <div class="col"><img src="1.png" alt="" width="100%"></div>
          <div class="col"><img src="1.png" alt="" width="100%"></div>
      </div>
</div>

变通一下.如果用百分比做宽度呢?

6.2. margin可以改变元素的dom顺序

<style>
    *{margin: 0;padding: 0;}
    .main{width:1000px;height: 1000px; margin:0 auto; background: yellow}
    .left{width: 200px;height: 300px;margin-left: -800px; float: left; background-color: red}
    .center{width: 600px;height: 500px; margin-left: 200px;  float: left; background-color: green}
    .right{width: 200px;height: 200px; float: right;background-color: blue;}
</style>
<div class="main">
      <div class="center">这里内容</div> 
      <div class="left">这里是左边栏</div> 
      <div class="right">这里是右边栏</div> 
   </div>

6.3. margin负值下的等高布局

<style>
    *{margin: 0;padding: 0;}
    .father{width: 400px; overflow: hidden;}
    .box1{margin-bottom: -500px; padding-bottom: 500px; float: left;width: 200px; background-color: red;}
    .box2{margin-bottom: -500px; padding-bottom: 500px; float: left;width: 200px; background-color: greenyellow;}
</style>
<div class="father">
       <div class="box1">
       </div>
       <div class="box2">
       </div>
</div>

思想:给一个很大的margin-bottom负值,再用很大的padding-bottom填充缺失的空间.

7. margin无效解析

1.inline元素的垂直margin无效
2.margin重叠
3.display:table-cell/display:table-row等申明的margin值”无效”
4.内联特性导致margin无效

小结:只要记得在margin无效时想起行内元素和margin重叠这两点,可应付绝大多数场景.