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

时间: 2024-10-09 05:13:20

margin系列之负值的相关文章

margin外边距负值的作用

margin外边距负值的作用:在很多CSS代码中,都可以看到margin外边距有使用负值的情况,下面就介绍一下他的作用.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

慎用margin系列3---IE6下3px bug

当我们想让一段文字出现在一个布局块的右边的时候,我们会让布局块向左浮动,然后把段落设置左布局块宽度大小的左空白.比如左布局块是.a{float:left;height: 110px;width: 286px;},我们就设置p{margin-left: 286px;border: 1px solid #000;},其中背景颜色和边框都是测试用的,不是必要的样式设置.在Firefox下可能没问题,但在IE下,你会发现布局块右边的段落离左边框有3px的空白,这就是一个bug.如图1 为了解决这个bug

margin系列之重叠

不管"程序猿"的世界是多么的杂乱,首先来个 css 2.1规范>Box model>margin-properties. 关于外边距重叠(Collapsing margins),该规范给出了如下几个规则: 对邻近外边距(Adjoining margins)的定义-分为不是(except)和是(if and only if)两种情况: 水平不重叠(Horizontal margins never collapse.) 最后在有邻近外边距的条件下,对重叠进行分类讨论.

ie6、7 margin负值部分无法看到的解决方法

ie6.7下,若元素设置margin值为负值,则margin负值区域会有一部分会离奇的消失,无法在页面上看到(相当于父元素设置了overflow:hidden后,子元素超出父元素部分就会被砍掉的效果一样) 问题重现代码: <style>*{margin: 0;padding: 0;}body{padding: 200px;}</style><div style="width:200px;height:200px;background:#f00;">&

margin 相关 bug 系列

原文地址:margin系列之bug巡演 by @doyoe IE6浮动双倍margin bug 这当是IE6最为经典的bug之一. 触发方式 元素被设置浮动 元素在与浮动一致的方向上设置margin值 来看看详细的代码吧: HTML <div id="demo"> <p>IE6下浮动方向上的margin值将会双倍于其指定值</p> </div> CSS #demo { overflow: hidden; width: 400px; mar

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

CSS中margin的认识

margin中设置边框的顺序为上右下左 {margin:top right buttom right} 等同于单独设置中的 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; } 省略的写法规则为: 如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到.如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值

css margin负边距之列布局(列表、圣杯、双飞翼)

技术服务于应用,技术来源于应用. 应用1:当接到设计师给的设计图时(如下图),发现每列左右和上下文保持一致,顿时整个心情就不好了.因为要兼顾响应式,即没办法保证每个列表单元的具体位置,是列表中间还是边缘,边缘两个要保证(左或右)内外边距为零,无法获得理想布局,综合多次搜索,得到解决办法: *** 增加列表区域宽度,margin设为负值. 原理相信有css基础的道友都清楚(负边距不仅能影响元素在文档流的位置,还能增加元素的宽度),父元素向右增加宽度(margin负值)与列表元素右边距相等,因使用的

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 'float' 的相互关系:2.position跟display.overflow.float下的margin collapse. 一.'display'.'position' 和 'float' 的相互关系 首先我们先来看下这3个属性. display 属性规定元素应该生成的框的类型. bloc