margin的解析逻辑

最新推荐文章于 2022-07-13 13:09:21 发布

单栖情绪

最新推荐文章于 2022-07-13 13:09:21 发布

阅读量314

点赞数 1

margin的解析逻辑
目前我们已经了解到了 margin 的基本特性和基本写法，但对元素 margin 的基本解析逻辑还是很模糊，到底 margin 的 top、right、bottom、left 都是以什么为基准来促使 box model 形成。为了形象，易懂的对 margin 的逻辑进行说明，下面讲解的过程中，将引入 W3C 上没有的参考线的说法。何谓参考线？参考线就是 margin 移动的基准点，此基准点相对于 box 是静止的。而 margin 的数值，就是 box 相对于参考线的位移量。
在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。那他们到底各以什么为参考线呢？top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。right 以元素本身的 border 右边为参考线水平向右位移；bottom 以元素本身的border 下边为参考线垂直向下位移。从上我们可以看到 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。上面的位移方向是指 margin 数值为正值时候的情形，如果是负值则位移方向相反。
201622112043237.gif (556×496)

或许理论听起来比较枯燥，我们举例说明一下：

 
  CSS Code 
  复制内容到剪贴板 
 
 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
 <html xmlns="http://www.w3.org/1999/xhtml">   
 <head>   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
 <title>无标题文档</title>   
 <style type="text/css">   
 div {   
         width:200px;   
         height:200px;   
         background:#ccc;   
 }   
 </style>   
 </head>       
   
 <body>   
         <div>外边距的margin-width的值类型有：auto | length | percentage</div>   
 </body>   
 </html>  
 
 

如上代码，很简单，为了方便我们看到效果，我们给 div 设置了宽度和高度以及背景色。
现在我们给 div 的样式加上 margin 属性，比如：

 
  CSS Code 
  复制内容到剪贴板 
 
   margin:-10px 20px -30px 40px;

这时候 margin 的解析逻辑是怎样的呢？首先我们要搞清 div 的和周边元素的关系，div 没有相连元素，而此时 div 的 containing block 是 body 产生的 block box。则根据上面介绍的参考线原理，div 的左外边距以 containing block 的 content 左边为参考线，及此时以 body 的 content 左边为参考线进行水平向右位移，位移的大小为 40px，同理，上边距以 body 的 content 上边为参考线进行垂直向上位移 10px（负值和正值的方向相反），下边距依照现在 div 的 borer 下边（此时的 div 已经经过上边距位移过了）垂直向上位移 30px（此时，margin 不会改变 box 的 border 内的物理大小，但会改变 box 的逻辑大小，即：以此 box 的 margin 的下边为参考的元素，不是从 box 的物理位置开始的，而是从逻辑位置开始），右边距依照现在 div 的 borer 右边（此时的 div 已经经过左边距位移过了）水平向右位移 20px。或许有朋友问你分析的顺序怎么和 margin 表达式中出现的顺序不一样？如果按照 margin 表达式中出现的顺序来分析，结果是一样的，只是为了更好的方便大家的理解而没有按照表达式的顺序来分析。
201622112103663.gif (550×1112)