css margin重叠
来源:互联网 发布:网络销售营业执照查询 编辑:程序博客网 时间:2024/05/22 16:57
CSS外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。两个或者
(在css中,两个或者多个毗邻(父子元素或者是兄弟元素)的普通流的块元素垂直方向上的margin会发生叠加)
外边距合并
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
补充:可以对元素的外边距设置百分数值,百分数是相对于父元素的width设计的,所以如果父元素的width以某种形式发生变化,百分数也会改变。
小技巧:外边距的单位(根据经验,为文本元素设置外边距时通常需要混合使用不同单位)
(例如:一个人段落的左右边距可以使用像素,以便该段文本始终与包含元素边界保持固定间距,不受字号变大变小影响;而对于上下边距,以em为单位,则可以让段间距随字号变化而相应增大或减小。示例:p{font-size:1em;margin:.75em 30px;}
- CSS margin重叠问题
- css margin重叠
- css margin 重叠
- css margin重叠的问题
- CSS:margin重叠-父子关系
- CSS的margin重叠问题
- css之Margin重叠现象
- css的margin重叠问题
- CSS:margin重叠-父子关系
- CSS:margin重叠-父子关系
- css margin重叠的问题
- css外边距margin重叠及其解决方法
- CSS布局 ——margin重叠
- margin重叠
- margin 重叠
- margin重叠
- margin重叠
- CSS CSS 外边距(margin)重叠及防止方法
- 比较实验
- STM8S103 LCD5110例程带字库
- HDU 4123 Bob’s Race(树形DP,rmq)
- 专题一 · 1002
- Python之re模块 —— 正则表达式操作
- css margin重叠
- 多线程笔试面试概念问答
- linux c system函数执行命令的返回值
- Unicode&UTF-8的区别
- Linux内核协议栈(附4) accept得到新的socket的本端端口号是什么?
- 第5周项目1 三角形雏形
- 操作系统思维导图
- Machine Learning第六周笔记一:评估学习算法和bias/variance
- 剑指offer:包含min函数的栈