CSS关键特性之 margin 特性专业知识大整合(必看篇

日期：2021-03-03 类型：科技新闻 

关键词：抠图软件电脑版，在线图片加水印，在线 抠图，在线画图网站，淘宝做图片用什么软件好

下列的共享是自己近期几日学习培训了margin专业知识后，大有启迪，觉得之前对margin的掌握真是太浅陋。因此写成下列文章内容，1是供自身梳理思路；2是把专业知识共享出来，防止各位对margin特性的误会。內容将会会有点多，但全是精粹，期待大伙儿细心学习培训。

下列的共享会分成以下內容：

1.margin 特性的简易详细介绍

　　1.1：一般流的 margin 百分比设定

　　1.2：肯定精准定位的 margin 百分比设定

2.margin 没法可用的元素

3.外边距折叠 (Collapsing margins)

　　3.1：Collapsing margins 初衷

　　3.2：Collapsing margins 种类

　　　　3.2.1：弟兄元素的 margin 重合

　　　　3.2.2：父子元素的 margin 重合

　　　　3.2.3：元素本身的 margin-bottom 和 margin-top 邻近时也会折叠

4.折叠后 margin 的测算标准

　　4.1：参加折叠的 margin 全是恰逢

　　4.2：参加折叠的 margin 全是负值

　　4.3：参加折叠的 margin 中有恰逢，有负值

5.Collapsing margins 处理方式

1.margin 特性的简易详细介绍

在详细介绍margin以前，先剖上1张W3C规范盒实体模型的照片，便于读者能够查询有关部位。

　　

margin，说白了，叫做外边距。

margin的基础特性有下列几点

a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，说明 margin 的尺寸范畴。

b：margin 值能够是 宽度值、百分比值或 'auto' 这3者之1。留意，margin 务必带有企业，企业能够是像素、英寸、毫米或 em。

c：margin 百分比值是相对父元素的 width 测算的。

d：当 margin 为 margin:10px 时，表明 top,right,bottom,left (逆时针)方位全是10px；当 margin 为 margin:10px 20px 时，表明左右方位为10px，上下方位为20px；当 margin 为 margin:10px 20px 5px 时，表明top方位为10px，上下方位为20px，bottom方位为5px；当 margin 为 margin:1px 2px 3px 4px 时，表明top方位为1px，right方位为2px，bottom方位为3px，left方位为4px。

上面根据对 margin 的简易详细介绍，大家了解 margin 的百分比值是相对父元素的 width 测算的，可是一般流和肯定精准定位元素的margin的测算是又是不同样的。

1.1：一般流的 margin 百分比设定

在一般流元素中，margin 百分比值得测算是根据其父元素的 width 测算的。

XML/HTML Code拷贝內容到剪贴板
  1. <div class="container">  
  2.             <div class="content"></div>  
  3.         </div>  
CSS Code拷贝內容到剪贴板
  1. .container {   
  2.         width: 300px;   
  3.         height: 300px;   
  4.         background-color: lightpink;   
  5.         margin: 10px;   
  6.         display: inline-block;   <!--设定此值是有缘故的，会在下面解读。-->   
  7.       }   
  8.       .container .content {   
  9.         width: 120px;   
  10.         height: 120px;   
  11.         background-color: lightgreen;   
  12.         margin: 10%;   
  13.       }  

能够看出， top left 方位的 margin 全是30px ( 300 * 10% = 30)。为父元素设定display是有缘故的，会在下面小标题提到，稍安勿躁。

留意，margin 4个方向的值全是根据父元素的 width 测算！

　　1.2：肯定精准定位的 margin 百分比设定

在肯定精准定位元素中，父元素若设定了relative/absolute/fixed，则 margin 百分比值是根据父元素的 width 测算的；父元素若无设定relative/absolute/fixed，则 margin 百分比值是根据 全部网页页面的 width 测算的。

CSS Code拷贝內容到剪贴板
  1. .container {   
  2.   width: 300px;   
  3.   height: 300px;   
  4.   background-color: lightpink;   
  5.   display: inline-block;   
  6. }   
  7. .container .content {   
  8.   width: 120px;   
  9.   height: 120px;   
  10.   background-color: lightgreen;   
  11.   position: absolute;   /*提升了改该特性*/  
  12.   margin: 10%;   
  13. }  

能够看出，margin 的值测算結果已不是30px了，而是变为 137px (我的电脑上网页页面宽度为1370px)。这是由于子元素container设定了absolute，致使子元素摆脱文本文档流，4个方向的值是根据网页页面开展精准定位，因此 margin值才会产生转变。假如想让子元素還是根据父元素精准定位，能够为父元素设定 relative/fixed/absolute 在其中之1个值， 这样 margin 百分比测算還是 30px，跟一般流中margin 的1样。 同学能够亲身尝试1下。

2.margin 没法可用的元素

　　有下列元素设定 margin 值是沒有实际效果的。

　　a：行内元素竖直 margin 值不起功效。

　　b：margin 非 table 种类的元素，和 table 种类中 table-caption, table-cell 和 inline-table 这3类。比如 TD TR TH 等，margin 是不可用的。

　　c：针对行内非更换元素（比如 SPAN），竖直方位的 margin 不起功效。

3.外边距折叠 (Collapsing margins)

Collapsing margins，即外边距折叠，指的是邻近的两个或好几个外边距 (margin) 汇合并成1个外边距。margin 折叠 务必产生在一般流元素中。

　　3.1：Collapsing margins 初衷

　　Collapsing margins 的初衷便是以便让段落显示信息的更为漂亮。以由几个段落构成的典型文字网页页面为例。第1个段落上面的室内空间等于段落的上外边距。假如沒有外边距合拼，后续全部段落之间的外边距都将是邻近上外边距和下外边距的和。这代表着段落之间的室内空间是网页页面顶部的两倍。假如产生外边距合拼，段落之间的上外边距和下外边距就合拼在1起，这样各部的间距就1致了。

此图来源于于 W3C

　　3.2：Collapsing margins 种类

　　　　3.2.1：弟兄元素的 margin 重合

XML/HTML Code拷贝內容到剪贴板
  1. <div class="container"></div>  
  2.  <div class="an-container"></div>  
CSS Code拷贝內容到剪贴板
  1. .container {   
  2.   width: 300px;   
  3.   height: 300px;   
  4.   margin-bottom: 10px;   
  5.   background-color: lightpink;   
  6. }   
  7. .an-container {   
  8.   width: 300px;   
  9.   height: 300px;   
  10.   margin-top: 10px;   
  11.   background-color: lightgreen;   
  12. }  

　　　　3.2.2：父子元素的 margin 重合

两个或好几个外边距沒有被非空內容、padding、border 或 clear 隔开开。

这些 margin 都处在一般流中。

　　　　　　margin-top 重合：在沒有被隔开的状况下，1个元素的 margin-top 会和它一般流中的第1个子元素(非波动元素等)的 margin-top 邻近。

XML/HTML Code拷贝內容到剪贴板
  1. <div class="container">  
  2.             <div class="an-container"></div>  
  3.         </div>  
CSS Code拷贝內容到剪贴板
  1. .container {   
  2.   width: 150px;   
  3.   margin-top: 10px;   
  4.   background-color: lightpink;   
  5. }   
  6. .container .an-container {   
  7.   background-color: lightgreen;   
  8.   width: 100px;   
  9.   height: 100px;   
  10.   margin-top: 10px;   
  11. }  

　　　　　　margin-bottom 重合：在沒有被隔开的状况下，仅有在父元素的 height 是 "auto" 的状况下，它的 margin-bottom 才会和它一般流中的最终1个子元素(非波动元素等)的 margin-bottom 邻近。便是说，父元素的height值不可以是固定不动高宽比值。假如父元素固定不动高宽比，那末margin-bottom会失效的。编码同上。

　　　　3.2.3：元素本身的 margin-bottom 和 margin-top 邻近时也会折叠

XML/HTML Code拷贝內容到剪贴板
  1. <div style="border:1px solid red; width:100px;">  
  2.      <div style="margin-top: 100px;margin-bottom: 50px;"></div>  
  3.  </div>  

以上编码运作后，大家讲获得的是鲜红色边框的正方形，方框的宽高都应当是 100px，高宽比不可该是 150px。

4.折叠后 margin 的测算标准

　　4.1：参加折叠的 margin 全是恰逢

XML/HTML Code拷贝內容到剪贴板
  1. <div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>  
  2.  <div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>  

在 margin 全是正数的状况下，取在其中 margin 较大的值为最后 margin 值。

　　4.2：参加折叠的 margin 全是负值

XML/HTML Code拷贝內容到剪贴板
  1. <div style="height:100px; margin-bottom:⑺5px; width:100px; background-color: red;">A</div>  
  2.  <div style="height:100px; margin-top:⑸0px; margin-left:50px; width:100px; background-color: green;">B</div>  

当 margin 全是负值的情况下，取的是在其中肯定值较大的，随后，从 0 部位，负向位移。

　　4.3：参加折叠的 margin 中有恰逢，有负值

XML/HTML Code拷贝內容到剪贴板
  1. <div style="height:50px; margin-bottom:⑸0px; width:50px; background-color: red;">A</div>  
  2. <div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>  

假如，邻近的 margin 中有恰逢，另外存在负值会如何呢？有正有负，先取下负 margin 中肯定值中最大的，随后，和正 margin 值中最大的 margin 相加。实际上也便是正负相加便可以了。

上面的事例最后的 margin 应当是 100 + (⑸0) = 50px。

5.Collapsing margins 处理方式

处理方式有以下：

a：波动元素、inline-block 元素、肯定精准定位元素的 margin 不容易和竖直方位上别的元素的 margin 折叠 ( 对于 弟兄元素)

留意: 波动元素 , inline-block元素 , 肯定精准定位元素 都属于 BFC元素。

b：建立了块级文件格式化左右文(BFC, blocking formatting context )的父元素，例如说overflow:hidden，不和它的子元素产生 margin 折叠 (对于 父子元素)。

c：给父元素加上下列內容之1都可以以免产生 margin 重合 。如 加上內容 ， 加上 padding ， 加上 border。

尽管有方式处理这个难题。可是现阶段最好是的处理计划方案是逃避这个难题。也便是，不必给特定元素加上具备特定宽度的内边距或外边距，而是尝试将内边距或外边距加上到元素的父元素和子元素。

以上这篇CSS关键特性之 margin 特性专业知识大整合(必看篇)便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

上一篇：inline 返回下一篇：没有了