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. 如何实现基于ssh框架的投票系统的的质量属性

    如何实现基于ssh框架的投票系统的的质量属性: 项目 :网上考试系统 我做的是网上考试系统,因为标准化的考试越来越重要,而通过计算机进行标准化判卷,系统会自动判卷出成绩,组织考试的人不用组织人员打印试 ...

  2. 美团外卖app可行性分析

    美团外卖app可行性分析 1 引言 1.1编写目的 年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完 ...

  3. 软件工程（五）UML

    UML 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言.包括UML语义和UML表示法两个元素. UMl图由事物和关系组成,事物:UML模型中最基本的构成元素,是具有代表性 ...

  4. C#-ToString格式化

    Int.ToString(format): 格式字符串采用以下形式:Axx,其中 A 为格式说明符,指定格式化类型,xx 为精度说明符,控制格式化输出的有效位数或小数位数,具体如下: 格式说明符 说明 ...

  5. mybatis逆向工程生成example的问题

    如果不想生成example,在 targetRuntime="MyBatis3" 处修改为  targetRuntime="MyBatis3Simple"  & ...

  6. type=hidden

    非常值得注意的一个,通常称为隐藏域:如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候. 一句话,你在页面中是看不到hidden在哪里.最有用的是hidden的值.

  7. tensorflow win10 系统下安装

    安装tensorflow gpu版本 Step1 安装CUDA8.0 进入这个云盘地址下载,密码5aoc 进行CUDA8.0下载.下载完成后解压,打开exe文件直接按照默认进行安装,安装步骤比较繁琐, ...

  8. nginx for Windows Known issues：path

    http://nginx.org/en/docs/windows.html nginx/Windows uses the directory where it has been run as the ...

  9. Docker Dockerfile指令

    Docker 可以通过 Dockerfile 的内容来自动构建镜像.Dockerfile 是一个包含创建镜像所有命令的文本文件,通过docker build命令可以根据 Dockerfile 的内容构 ...

  10. codeforces387B

    George and Round CodeForces - 387B George decided to prepare a Codesecrof round, so he has prepared  ...