margin系列之负值

对于负值的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是布局里面比较好的属性。

posted @ 2017-04-16 14:30  成长感性  阅读(269)  评论(0编辑  收藏  举报