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. mapreduce 中 map数量与文件大小的关系

    学习mapreduce过程中, map第一个阶段是从hdfs 中获取文件的并进行切片,我自己在好奇map的启动的数量和文件的大小有什么关系,进过学习得知map的数量和文件切片的数量有关系,那文件的大小 ...

  2. Sprint会议计划

    经过饭后的宿舍激烈会议之后...... 1.我们的MASTER是组员董大为 2.这次sprint的目标是四则运算系统 3.每天例会时间地点:每天晚饭后在宿舍 4.实现四则运算的基本功能前期已经完成得差 ...

  3. 四则运算APP

    1)   N (Need 需求) 用户基本需求:随机生成四则运算,能自动判定对错,答错时能提示正确答案! 在这个基础上,我的创意: 多用户模式,能记录用户的答题情况(登陆功能) 分级挑战,按照不同的水 ...

  4. CRM 数据查重

    2.8 小工具 · 纷享销客产品手册https://www.fxiaoke.com/mob/guide/crmdoc/src/2-8%E5%B0%8F%E5%B7%A5%E5%85%B7.html C ...

  5. Gradle下载类库源码

    https://blog.csdn.net/xiaoxing598/article/details/68958383 备选:https://www.cnblogs.com/yoyotl/p/62917 ...

  6. Java代码安全

    https://www.owasp.org/index.php/Category:Java

  7. ECSHOP后台登陆后一段时间不操作就超时的解决方法

    ECSHOP后台登陆后一段时间不操作就超时的解决方法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-27   客户生意比较好,因此比较忙,常常不在电脑前 ...

  8. RBAC权限控制系统

    1.概述 RBAC(Role-Based Access Control )基于角色的访问控制. RBAC的权限控制可以抽象概括为:判断[Who是否可以对What进行How的访问操作(Operator) ...

  9. 请求与响应编码及jsp基本原理

    1.请求转发和请求包含 (1)请求转发: this.getServletContext().getRequestDispatcher("").forward(request,res ...

  10. 如何为TreeView定义三层模板并实现数据绑定

    一直以来都想对TreeView定义多层模板,并实现数据绑定做一个总结,今天在这里做一个概述,我们常用的两层的TreeView绑定的话,我们首先修改TreeView的模板,这里我们使用的是级联的数据模板 ...