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

转载于:https://www.cnblogs.com/zhangshiliang/p/6718721.html

margin系列之负值相关推荐

margin赋值为负值的几种效果（负值像素，负值百分数）
1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang=&q ...
margin系列之百分比
你可能从没注意过它在 margin系列之keyword auto 中,说过了 margin 值为 auto 的情况,这次要聊的是值为百分比的情形. 我必须承认这是一个非常基础的知识点,但有一段时间我 ...
margin为负值的几种情况
1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html>2 <html lang=&qu ...
CSS margin详解
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
浅析Margin和Padding属性
序 Magin:有边缘的意思,在Android布局中的使用方式是 android:layout_margin="XXdp",看到这个不免想到layout是父布局来控制子控件的. 而 ...
padding和margin的用法
padding的用法: 1: padding是长在内容和盒子之间的,在盒子内部. 2:padding是为了调整子元素在父元素里面位置关系. 3:padding的特点:padding值 ...
margin和padding的用法
如果我们想要移动盒子等的位置 ,除了可以用相对定位和绝对定位还可以用margin 和paddinng: margin和padding的用法: padding和margin后面可以跟1或2或3或4个数, ...
HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

margin系列之负值

margin系列之负值相关推荐

最新文章

热门文章