HTML&CSS基础-垂直外边距的重叠/折叠

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>垂直外边距的重叠</title>

        <style type="text/css">

            /**

             *     垂直外边距的重叠

             *         在网页中相邻且垂直方向的外边距会发生外边距的重叠;

             *         所谓的外边距重叠指的是元素之间相邻边距会取最大值而不是取和;

             *         如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

             */

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

                /**

                 *     为上边距的元素设置一个下外边距

                 */

                margin-bottom: 100px;

            }

            .box2{

                width: 100px;

                height: 100px;

                background-color: royalblue;

                /**

                 *     为下边的元素设置一个上外边距

                 */

                margin-top: 100px;

            }

            .box3{

                width: 200px;

                height: 100px;

                background-color:deeppink;

                padding-top: 100px;

            }

            .box4{

                width: 100px;

                height: 100px;

                background-color:coral;

                /**

                 *     为子元素设置一个上边距，使得子元素唯一下移

                 */

                /*margin-top: 100px;*/

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3">

            <div class="box4"></div>

        </div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

http原理详解的更多相关文章

  1. I2C 基础原理详解

    今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...

  2. Zigbee组网原理详解

    Zigbee组网原理详解 来源:互联网 作者:佚名2015年08月13日 15:57   [导读] 组建一个完整的zigbee网状网络包括两个步骤:网络初始化.节点加入网络.其中节点加入网络又包括两个 ...

  3. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  4. SSL/TLS 原理详解

    本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...

  5. 锁之“轻量级锁”原理详解(Lightweight Locking)

    大家知道,Java的多线程安全是基于Lock机制实现的,而Lock的性能往往不如人意. 原因是,monitorenter与monitorexit这两个控制多线程同步的bytecode原语,是JVM依赖 ...

  6. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  7. 节点地址的函数list_entry()原理详解

    本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...

  8. WebActivator的实现原理详解

    WebActivator的实现原理详解 文章内容 上篇文章,我们分析如何动态注册HttpModule的实现,本篇我们来分析一下通过上篇代码原理实现的WebActivator类库,WebActivato ...

  9. Influxdb原理详解

    本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 15 部分: InfluxDB学习之InfluxDB的安装和简介 InfluxDB学习之InfluxDB的基本概念 Infl ...

  10. 【转】VLAN原理详解

    1.为什么需要VLAN 1.1 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.V ...

随机推荐

  1. 数组与字符串三（Cocos2d-x 3.x _Array容器）

    "程序=数据结构+算法" 在面向对象的语言中,诸如数组.堆栈.队列等的结构都被封装成了特定的类,按照特定数据结构的算法设计起来,这就是容器类. Cocos2d-x中,能使用的容器类 ...

  2. Oracle系列(二)： Oracle表的外键查询

    在执行数据库删除操作时,外键关联是令我们最烦的一个东西,有了外键关联,就不允许随意删除数据,那么怎知道这个外键关联度的外键属于那个表? select * from user_cons_columns ...

  3. Integer Sequence Dividing CodeForces - 1102A (规律)

    You are given an integer sequence 1,2,…,n1,2,…,n. You have to divide it into two sets AAand BB in su ...

  4. MSA微服务

    https://github.com/das2017?tab=repositories https://github.com/icsharpcode/ILSpy/releases LayerDemo ...

  5. PAT 1038 统计同成绩学生

    https://pintia.cn/problem-sets/994805260223102976/problems/994805284092887040 本题要求读入N名学生的成绩,将获得某一给定分 ...

  6. C语言删除指定文件

    C语言的文件操作想必大家都多多少少的有所了解,今天为大家献上删除文件的操作方法.这里我们要用到的是remove(const T& x);x使用代表文件路径及文件名的字符常量来确定需要删除的对象 ...

  7. win10总是2分钟就自动睡眠怎么办 win10系统自动休眠bug怎么解决（转）

        解决方法如下: 1.右键点击开始图标,选择[运行],或者利用快捷键“win+R”打开运行窗口,win键是ctrl和alt键中间的徽标键:

  8. [转帖]以Windows服务方式运行.NET Core程序

    以Windows服务方式运行.NET Core程序 原作者blog:https://www.cnblogs.com/guogangj/p/10093102.html 里面使用了NSSM 工具 但是自己 ...

  9. WPF 如何控制右键菜单ContextMenu的弹出

    在具体做一些项目的时候,有时候需要需要先左键点击某个节点,然后再右键点击节点的时候才弹出右键菜单,所以直接右键点击时需要禁用掉右键菜单,这里比如我们为Grid添加了ContextMenu,但是我们需要 ...

  10. indicator function指示函数

    指示函数   在集合论中,指示函数是定义在某集合X上的函数,表示其中有哪些元素属于某一子集A. 中文名 指示函数 外文名 indicator function 相关学科 数学.组合数学 其他称呼 特征 ...