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. java-过滤器、拦截器

    1.基础知识 1.1面向对象编程(OOP).面向切面编程(AOP) 面向对象编程: 将需求功能划分为不同的.相对独立的和封装良好的类,使他们有属于自己的行为,依靠继承和多态等来定义彼此的关系. 面向切 ...

  2. "一个程序员的生命周期"读后感

    这篇文章中作者叙述了自己和大多数大学生或许都会面对的问题,即是会走过挺多的歪路,面临很多的困难和压力,但是作者却从未放弃自己真正追求的东西.对于一个过来人的经验之谈,我们应该吸取经验,在大学好好去奋斗 ...

  3. 【转】使用screw plus对PHP源码加密

    运行环境 ubuntu 14.04 php 5.6 源码地址 https://github.com/del-xiong/screw-plus http://git.oschina.net/splot/ ...

  4. 震旦199打印机扫描A4文件

    1.需要扫描的A4文件放入输稿器 2.使用数据线将打印机.电脑连接 3.在电脑中右键打印机,选择扫描功能 4.如下图,选择选项后,点击扫描即可

  5. linux_shell自定义命令

    一.命令可执行文件所在目录 shell命令可执行文件所在目录是保存在环境变量PATH中的,终端输入如下命令查看 PATH 环境变量的内容: $ echo $PATH 我的linux输出如下: /opt ...

  6. git 查看远程分支最后一次提交时间

    背景 因为工程创建时间很长了,项目又特别多,导致代码库中远程分支有100多.想要清理一下远程分支,但又不能盲目的删除,需要一定的参考信息. 可以通过代码最后提交时间来进行判断,但是100多个分支,一个 ...

  7. Android控件第4类——ProgressBar

    ProgressBar是进度条,是比较常用的控件.它有一个抽象的子类——AbsSeekBar,AbsSeekBar有两个比较常用子类,SeekBar.RatingBar. 1.ProgressBar, ...

  8. Node post请求 通常配合ajax

    //处理客户post请求//*1:加载相应模块 http express querystring//*2:创建web服务器//*3:监听端口8080const http = require(" ...

  9. mongoose 入门基本操作

    简介 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:ht ...

  10. ubuntu16.04 NFS系统挂载

    一:服务器端 step1:关闭防火墙 sudo ufw disable step2:安装nfs sudo apt-get install nfs-kernel-server step3: 打开/etc ...