主页 > 网站建设 >

CSS重要属性之 margin 属性知识大整合(必看篇)

网站建设 2023-01-28 21:38www.1681989.com免费网站

以下的分享是本人最近几天学习了marg知识后，大有启发，感觉以前对marg的了解简直太浅薄。所以写成以下文章，一是供自己整理思路；二是把知识分享出来，避免各位对marg属性的误解。内容可能会有点多，但都是精华，希望大家耐心学习。

以下的分享会分为如下内容

1.marg 属性的简单介绍

　　1.1普通流的 marg 百分比设置

　　1.2绝对定位的 marg 百分比设置

2.marg 无法适用的元素

3.外边距折叠 (Collapsg margs)

　　3.1Collapsg margs 初衷

　　3.2Collapsg margs 类型

　　　　3.2.1兄弟元素的 marg 重叠

　　　　3.2.2父子元素的 marg 重叠

　　　　3.2.3元素自身的 marg-bottom 和 marg- 相邻时也会折叠

4.折叠后 marg 的计算规则

　　4.1参与折叠的 marg 都是正值

　　4.2参与折叠的 marg 都是负值

　　4.3参与折叠的 marg 中有正值，有负值

5.Collapsg margs 解决方法

1.marg 属性的简单介绍

在介绍marg之前，先剖上一张W3C标准盒模型的图片，以便读者可以查看相关位置。

　　

marg，顾名思义，叫做外边距。

marg的基本属性有以下几点

amarg 是 'marg-', 'marg-right', 'marg-bottom', 'marg-left' 的简写，表明 marg 的大小范围。

bmarg 值可以是 宽度值、百分比值或 'auto' 这3者之一。注意，marg 必须带有单位，单位可以是像素、英寸、毫米或 em。

cmarg 百分比值是相对于父元素的 width 计算的。

d当 marg 为 marg:10px 时，表示 ,right,bottom,left (逆时针)方向都是10px；当 marg 为 marg:10px 20px 时，表示上下方向为10px，左右方向为20px；当 marg 为 marg:10px 20px 5px 时，表示方向为10px，左右方向为20px，bottom方向为5px；当 marg 为 marg:1px 2px 3px 4px 时，表示方向为1px，right方向为2px，bottom方向为3px，left方向为4px。

上面通过对 marg 的简单介绍，我们知道 marg 的百分比值是相对于父元素的 width 计算的，普通流和绝对定位元素的marg的计算是又是不相同的。

1.1普通流的 marg 百分比设置

在普通流元素中，marg 百分比值得计算是依据其父元素的 width 计算的。

XML/HTML Code复制内容到剪贴板
  1. <div class="contaer">  
  2.             <div class="content"></div>  
  3.         </div>  
CSS Code复制内容到剪贴板
  1. .contaer {   
  2.         width: 300px;   
  3.         height: 300px;   
  4.         background-color: lightpk;   
  5.         marg: 10px;   
  6.         display: le-block;   <!--设置此值是有原因的，会在狼蚁网站SEO优化讲解。-->   
  7.       }   
  8.       .contaer .content {   
  9.         width: 120px;   
  10.         height: 120px;   
  11.         background-color: lightgreen;   
  12.         marg: 10%;   
  13.       }  

可以看出， left 方向的 marg 都是30px ( 300 10% = 30)。为父元素设置display是有原因的，会在狼蚁网站SEO优化小节提到，稍安勿躁。

注意，marg 四个方位的值都是依据父元素的 width 计算！

　　1.2绝对定位的 marg 百分比设置

在绝对定位元素中，父元素若设置了relative/absolute/fixed，则 marg 百分比值是依据父元素的 width 计算的；父元素若无设置relative/absolute/fixed，则 marg 百分比值是依据 整个页面的 width 计算的。

CSS Code复制内容到剪贴板
  1. .contaer {   
  2.   width: 300px;   
  3.   height: 300px;   
  4.   background-color: lightpk;   
  5.   display: le-block;   
  6. }   
  7. .contaer .content {   
  8.   width: 120px;   
  9.   height: 120px;   
  10.   background-color: lightgreen;   
  11.   position: absolute;   /增加了改该属性/  
  12.   marg: 10%;   
  13. }  

可以看出，marg 的值计算结果不再是30px了，而是变成 137px (我的电脑页面宽度为1370px)。这是因为子元素contaer设置了absolute，导致子元素脱离文档流，四个方位的值是依据页面进行定位，所以 marg值才会发生变化。如果想让子元素还是依据父元素定位，可以为父元素设置 relative/fixed/absolute 其中之一个值， 这样 marg 百分比计算还是 30px，跟普通流中marg 的一样。 同学可以亲自尝试一下。

2.marg 无法适用的元素

　　有以下元素设置 marg 值是没有效果的。

　　a行内元素垂直 marg 值不起作用。

　　bmarg 非 table 类型的元素，以及 table 类型中 table-caption, table-cell 和 le-table 这3类。例如 TD TR TH 等，marg 是不适用的。

　　c对于行内非替换元素（例如 SPAN），垂直方向的 marg 不起作用。

3.外边距折叠 (Collapsg margs)

Collapsg margs，即外边距折叠，指的是相邻的两个或多个外边距 (marg) 会合并成一个外边距。marg 折叠 必须发生在普通流元素中。

　　3.1Collapsg margs 初衷

　　Collapsg margs 的初衷就是为了让段落显示的更加好看。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

此图来源于 W3C

　　3.2Collapsg margs 类型

　　　　3.2.1兄弟元素的 marg 重叠

XML/HTML Code复制内容到剪贴板
  1. <div class="contaer"></div>  
  2.  <div class="an-contaer"></div>  
CSS Code复制内容到剪贴板
  1. .contaer {   
  2.   width: 300px;   
  3.   height: 300px;   
  4.   marg-bottom: 10px;   
  5.   background-color: lightpk;   
  6. }   
  7. .an-contaer {   
  8.   width: 300px;   
  9.   height: 300px;   
  10.   marg-: 10px;   
  11.   background-color: lightgreen;   
  12. }  

　　　　3.2.2父子元素的 marg 重叠

两个或多个外边距没有被非空内容、paddg、border 或 clear 分隔开。

这些 marg 都处于普通流中。

　　　　　　marg- 重叠在没有被分隔的情况下，一个元素的 marg- 会和它普通流中的第一个子元素(非浮动元素等)的 marg- 相邻。

XML/HTML Code复制内容到剪贴板
  1. <div class="contaer">  
  2.             <div class="an-contaer"></div>  
  3.         </div>  
CSS Code复制内容到剪贴板
  1. .contaer {   
  2.   width: 150px;   
  3.   marg-: 10px;   
  4.   background-color: lightpk;   
  5. }   
  6. .contaer .an-contaer {   
  7.   background-color: lightgreen;   
  8.   width: 100px;   
  9.   height: 100px;   
  10.   marg-: 10px;   
  11. }  

　　　　　　marg-bottom 重叠在没有被分隔的情况下，只有在父元素的 height 是 "auto" 的情况下，它的 marg-bottom 才会和它普通流中的一个子元素(非浮动元素等)的 marg-bottom 相邻。就是说，父元素的height值不能是固定高度值。如果父元素固定高度，那么marg-bottom会无效的。代码同上。

　　　　3.2.3元素自身的 marg-bottom 和 marg- 相邻时也会折叠

XML/HTML Code复制内容到剪贴板
  1. <div style="border:1px solid red; width:100px;">  
  2.      <div style="marg-: 100px;marg-bottom: 50px;"></div>  
  3.  </div>  

以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。

4.折叠后 marg 的计算规则

　　4.1参与折叠的 marg 都是正值

XML/HTML Code复制内容到剪贴板
  1. <div style="height:50px; marg-bottom:50px; width:50px; background-color: red;">A</div>  
  2.  <div style="height:50px; marg-:100px; width:50px; background-color: green;">B</div>  

在 marg 都是正数的情况下，取其中 marg 较大的值为最终 marg 值。

　　4.2参与折叠的 marg 都是负值

XML/HTML Code复制内容到剪贴板
  1. <div style="height:100px; marg-bottom:-75px; width:100px; background-color: red;">A</div>  
  2.  <div style="height:100px; marg-:-50px; marg-left:50px; width:100px; background-color: green;">B</div>  

当 marg 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。

　　4.3参与折叠的 marg 中有正值，有负值

XML/HTML Code复制内容到剪贴板
  1. <div style="height:50px; marg-bottom:-50px; width:50px; background-color: red;">A</div>  
  2. <div style="height:50px; marg-:100px; width:50px; background-color: green;">B</div>  

如果，相邻的 marg 中有正值，存在负值会怎样呢？有正有负，先取出负 marg 中绝对值中最大的，然后，和正 marg 值中最大的 marg 相加。其实也就是正负相加就可以了。

上面的例子最终的 marg 应该是 100 + (-50) = 50px。

5.Collapsg margs 解决方法

解决方法有如下

a浮动元素、le-block 元素、绝对定位元素的 marg 不会和垂直方向上其他元素的 marg 折叠 ( 针对 兄弟元素)

注意: 浮动元素 , le-block元素 , 绝对定位元素 都属于 BFC元素。

b创建了块级格式化上下文(BFC, blockg formattg context )的父元素，比如说overflow:hidden，不和它的子元素发生 marg 折叠 (针对 父子元素)。

c给父元素添加以下内容之一都可以避免发生 marg 重叠 。如 添加内容 ， 添加 paddg ， 添加 border。

虽然有方法解决这个问题。目前最好的解决方案是回避这个问题。也就是，不要给指定元素添加具有指定宽度的内边距或外边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

以上这篇CSS重要属性之 marg 属性知识大整合(必看篇)就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：CSS background全部汇总 下一篇：浅谈css和@import区别及用法

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by