margin系列之负值

Posted 2020-09-11

对于负值的margin，好像 css 2.1 规范中没有提及（反正我没有找到）。看来，“猿猴”的生活还木有结束。。。

但，就像孙悟空逃不了佛祖手掌心一样，程序猿也逃不了“规范”的手掌心。虽然规范中没说，但却给了我们暗示。

　　1、子元素有负值margin：也就是转化对于containing box的作用，这个就是css 2.1 规范中的 Visual formatting model details 的“等号关系式”了。就其中一种情况来说：Block-level, non-replaced elements in normal flow（文档流中的块级不可替代元素，比如：div，p...)　　等号关系式为：   ‘margin-left‘ + ‘border-left-width‘ + ‘padding-left‘ + ‘width‘ + ‘padding-right‘ + ‘border-right-width‘ + ‘margin-right‘ = width of containing block

从而就有了，进步博客中的  5.google reader自适应渐变圆角按钮。  .button-inner-box元素的margin减去了长度，width就要加长度。自然就有了圆弧角效果。

 

　　对于height好像没有明显的规范出等号关系式，但却定性给出了规范：Block-level non-replaced elements in normal flow when ‘overflow‘ computes to ‘visible‘.其中2，3条说明分别给出了父元素的底部是its last in-flow child，1条给出底元素是line box的情况。父元素的height值 = top content edge ~~ 底部值。

　　至于底部怎么确定height，这自然涉及该底部元素了。

从而就有了，进步博客中的 6.三栏等高。 在.wrapper里有个line box，再对line box中元素的margin-bottom进行处理，就有了给效果。

　　2、在同级元素有负值margin：这个在 css 2.1 规范中是有的>Visual formatting model>Normal flow>Block formatting context.

大概意思两个方面：1、同级元素”流方向“：从上到下，从左到右；2、父子元素”流方向“：子元素从父元素的左上开始。

　　想必大家对这个都熟悉，其中应用的也比较多：

进步博客中的 1.负边距+定位：水平垂直居中 。。。

　　3、综合应用：

张鑫旭大神的三栏布局。

　　4、margin的布局不像absolute一样要启动渲染和重绘(absolute的替换方案），没有float要清除浮动那木麻烦。所以，本”猿“认为margin是布局里面比较好的属性。