CSS的margin边界叠加深度剖析图文演示

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

　　当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：


元素的顶边界与前面元素的底边界发生叠加

　　当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图：


元素的顶边界与父元素的顶边界发生叠加

　　尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，见图：


元素的顶边界与底边界发生叠加

　　如果这个边界碰到另一个元素的边界，它还会发生叠加，见图：


空元素中已经叠加的边界与另一个空元素的边界发生叠加

　　这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有边界都叠加到一起，形成一个小的边界。

　　边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例（见图2-8）。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了


边界叠加在元素之间维护了一致的距离

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

　　边界叠加的问题
　　边办叠加是一个如果误解就会导致许多麻烦的CSS特性。请参考div元素内嵌套段落的简单示例：


代码如下:

<div id="box"> 
<p>This paragraph has a 20px margin.</p> 
</div>

div 框设置了10像素边界，段落设置了20像素的边界：

代码如下:

#box{ 
margin:10px; 
background-color:#d5d5d5; 
} 
p{ 
margin:20px; 
background-color:#6699ff; 
}

　　你会自然地认为产生的样式会像图1-1那样，在段落和div之间有20像素的距离，在div外边围绕着10像素的边界。


图1-1

　　但是，产生的样式实际上像图1-2。


图1-2

CSS的margin边界叠加深度剖析

#box{
margin:10px;
background-color:#d5d5d5;
}
p{
margin:20px;
background-color:#6699ff;
}

This paragraph has a 20px margin.

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这里发生了两个情况。首先，段落的20像素上边界和上边界与div的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被DIV包围，而是突出到DIV的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。

　　如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

　　为了让前面的示例看起来像图1-1这样，只需在div周围添加补白或边框：


代码如下:

#box{ 
margin:10px; 
padding:1px;/*或者border:1px solid color;*/ 
background-color:#d5d5d5; 
} 
p{ 
margin:20px; 
background-color:#6699ff; 
}

　　边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

　　补充解决方案：


代码如下:

　　　　1.外层 padding 
　　　　2.透明边框 border:1px solid transparent; 
　　　　3.绝对定位 postion:absolute: 
　　　　4.外层DIV overflow:hidden; 
　　　　5.内层DIV  加float:left; display:inline; 
　　　　6.外层DIV有时会用到zoom:1;

赞 (0)

相关推荐

  • 简单谈谈margin负值的作用

    简单谈谈margin负值的作用

    1.有俩个边框,有不同的背景色,不管哪边高增加,另一边也变高 2.实现自适应

  • 关于margin-left的示例代码

    关于margin-left的示例代码

    刚找到一个不错的东东 body { margin: 36pt 24pt 36pt; }  body { margin: 11.5%; }  body { margin: 10% 10% 10% 10%; } #idParentDiv{width:100%;padding:6px;background-color:buttonshadow;} #idDiv{width:400px;height:80px;background-color:#FFD700;padding:6px;} #idCodeD

  • firefox margin-top失效的原因与解决办法

    为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少. 现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理.不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁. 在这个说明中,"collapsing margins"(折叠margin)的意思是

  • jQuery获得包含margin的outerWidth和outerHeight的方法

    本文实例讲述了jQuery获得包含margin的outerWidth和outerHeight的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(fun

  • 用margin和overflow属性实现div间距的方法

    用margin和overflow属性实现div间距的方法

    通常我们在制作上图的时候,会分别给四个div加上不同的css属性,来实现中间间隔.但我们更希望的是不需要对html标签做标识,直接能通过css实现,今天在论坛上小志提出了一个很不错的解决方案.使用overflow:hidden属性.或许很多人已经是这样用了,我没用过,觉得耳目一新.呵呵.其实道理很简单,我们按照正常的设置li的margin-right.margin-bottom属性,这样的结果自然会比我们期望的要多出来右边和下方的,这个时候我们通过ul的父级来设置width/height属性,然

  • 用iframe margin实现调用其他网页的某一区域的方法

    逛网中发现,用iframe的margin函数实现调用一网页的部分区域,太有才了,以后就方便了 新建网页 body{ } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Android中gravity、layout_gravity、padding、margin的区别小结

    1.gravity与layout_gravity的区别 gravity 属性是对该view 内容的限定．比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置．该属性就干了这个． layout_gravity 是用来设置该view相对与起父view 的位置．比如一个button 在linearlayout里,你想把该button放在靠左 靠右等位置就可以通过该属性设置． 这样就解释了,有什么我们弄个最外布局,然后里面包了几个布局,如果要使这几个布局都靠底,就可

  • 各浏览器padding、margin的差异

    各浏览器padding、margin的差异

    margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE 6.0 Firefox Opera等是真实宽度=width+padding+border+marginIE5.X真实宽度=width-padding-border-margin 解决的方法是: div.content { width:400px; //这个是错误的width,所有浏览器都读到了voice-family: "\"}\""; //IE5.X/wi

  • CSS的margin边界叠加深度剖析图文演示

    CSS的margin边界叠加深度剖析图文演示

    边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: 元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: 元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿奇怪,但是边界甚至可

  • 深度剖析Golang如何实现GC扫描对象

    目录 扫描的目的 扫描的实现 运行期内存分配 运行扫描阶段 总结 之前阐述了 golang 垃圾回收通过保证三色不变式来保证回收的正确性,通过写屏障来实现业务赋值器和 gc 回收器正确的并发的逻辑.其中高概率的提到了“扫描队列”和“扫描对象”.队列这个逻辑非常容易理解,那么”扫描对象“ 这个你理解了吗?有直观的感受吗?这篇文章就是要把这个扫描的过程深入剖析下. 扫描的东西是啥?形象化描述下 怎么去做的扫描?形象化描述下 我们就是要把这两个抽象的概念搞懂,不能停留在语言级别浅层面,要知其然知其所以

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • PHP序列化和反序列化深度剖析实例讲解

    序列化 序列化格式 在PHP中,序列化用于存储或传递 PHP 的值的过程中,同时不丢失其类型和结构. 序列化函数原型如下: string serialize ( mixed $value ) 先看下面的例子: class CC { public $data; private $pass; public function __construct($data, $pass) { $this->data = $data; $this->pass = $pass; } } $number = 34;

  • C语言可变参数列表的用法与深度剖析

    C语言可变参数列表的用法与深度剖析

    目录 前言 一.可变参数列表是什么? 二.怎么用可变参数列表 三.对于宏的深度剖析 隐式类型转换 对两个函数的重新认知 总结 前言 可变参数列表,使用起来像是数组,学习过函数栈帧的话可以发现实际上他也就是在栈区定义的一块空间当中连续访问,不过他不支持直接在中间部分访问. 声明: 以下所有测试都是在x86,vs2013下完成的. 一.可变参数列表是什么? 在我们初始C语言的第一节课的时候我们就已经接触了可变参数列表,在printf的过程当中我们通常可以传递大量要打印的参数,但是我们却不知道他是如何

  • MyBatis核心源码深度剖析SQL语句执行过程

    MyBatis核心源码深度剖析SQL语句执行过程

    目录 1 SQL语句的执行过程介绍 2 SQL执行的入口分析 2.1 为Mapper接口创建代理对象 2.2 执行代理逻辑 3 查询语句的执行过程分析 3.1 selectOne方法分析 3.2 sql获取 3.3 参数设置 3.4 SQL执行和结果集的封装 4 更新语句的执行过程分析 4.1 sqlsession增删改方法分析 4.2 sql获取 4.3 参数设置 4.4 SQL执行 5 小结 1 SQL语句的执行过程介绍 MyBatis核心执行组件: 2 SQL执行的入口分析 2.1 为Ma

  • 你真的理解C语言qsort函数吗 带你深度剖析qsort函数

    目录 一.前言 二.简单冒泡排序法 三.qsort函数的使用 1.qsort函数的介绍 2.qsort函数的运用 2.1.qsort函数排序整型数组 2.2.qsort函数排序结构体 四.利用冒泡排序模拟实现qsort函数 五.总结 一.前言 我们初识C语言时,会做过让一个整型数组按照从小到大来排序的问题,我们使用的是冒泡排序法,但是如果我们想要比较其他类型怎么办呢,显然我们当时的代码只适用于简单的整形排序,对于结构体等没办法排序,本篇将引入一个库函数来实现我们希望的顺序. 二.简单冒泡排序法

  • 深度剖析Golang中的数组,字符串和切片

    目录 1. 数组 1.1 定义数组 1.2 访问数组 1.3 修改数组 1.4 数组长度 1.5 遍历数组 1.6 多维数组 2. 切片 2.1 定义切片 2.2 访问切片元素 2.3 修改切片元素 2.4 切片长度和容量 2.5 向切片中添加元素 2.6 切片的切片 2.7 切片排序 3. 字符串 3.1 访问字符串中的字符 3.2 字符串切片 3.3 字符串操作 3.4 关于字符串的常见问题 4. 总结 1. 数组 数组是 Golang 中的一种基本数据类型,用于存储固定数量的同类型元素.在

  • Java拆装箱深度剖析

    先来看一段代码: public class Main{ public static void main(String[] args){ Integer num1 = 100; Integer num2 = 100; Integer num3 = 200; Integer num4 = 200; '''//输出结果''' System.out.println(num1==num2); System.out.println(num3==num4); } } 猜猜结果是什么? 很多人都会认为结果全为t

  • 深度剖析java中JDK动态代理机制

    深度剖析java中JDK动态代理机制

    摘要 相比于静态代理,动态代理避免了开发人员编写各个繁锁的静态代理类,只需简单地指定一组接口及目标类对象就能动态的获得代理对象. 代理模式 使用代理模式必须要让代理类和目标类实现相同的接口,客户端通过代理类来调用目标方法,代理类会将所有的方法调用分派到目标对象上反射执行,还可以在分派过程中添加"前置通知"和后置处理(如在调用目标方法前校验权限,在调用完目标方法后打印日志等)等功能. 使用动态代理的五大步骤 1.通过实现InvocationHandler接口来自定义自己的Invocati

随机推荐