简述CSS网页布局中外边距叠加问题

2016-02-19 17:38 11 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

  在进行CSS网页布局时会遇到许多奇怪的问题,这些问题可能是浏览器的bug,也可能是对CSS属性不够了解所造成。本文就探讨一下CSS外边距叠加的问题。

  边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局是,它会造成许多混淆。

  当一个元素出现在另一个元素上面时,第一个元素的下外边

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:

  尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。

  假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  如果这个外边距遇到另一个元素的外边距,它还会发生合并:

  这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。

  外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

  只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

来源:http://www.tulaoshi.com/n/20160219/1615685.html

延伸阅读
标签: Web开发
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:ce...
标签: Web开发
用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的! 一、IE边框若显若无,须注意,定是高度设置已忘记; 二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中; 三、三像素文本慢移不必慌,高度设置帮你忙; 四、兼容各个浏览须注意,默认设置行高可能是杀手; 五、独立...
标签: Web开发
上一篇 CSS教程 文章:CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局...
标签: Web开发
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS...

经验教程

197

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部