CSS中的叠加分为以下三种:

1、上下叠加

CSS部分:

#div1{ width:200px; height:50px; margin-bottom:30px; background:#ffff00;} 

#div2{ width:200px; height:50px; margin-top:20px; background:#ff00ff;}

HTML部分:

<div id="div1">&nbsp;</div> <div id="div3"> 
    <div id="div4">      
    </div> 
</div>

<div id="div2">&nbsp;</div>

当一个div有向下空白边,第二个div有向上空白边时,两者的空白边发生叠加,叠加后的空白边值取值大者。

2、内部叠加

CSS部分:

#div3{ width:200px; height:100px; margin-top:50px; background:#00ffff;} 

#div4{width:200px; height:60px; margin-top:30px; background:#0f0fff;}

HTML部分:

<div id="div3"> 

    <div id="div4">      

    </div> 

</div>

当两个div都有向上的空白边时,发生叠加,叠加后的空白边值取值大者。

3、自我叠加

CSS部分:

#div5{width:200px; margin-top:20px;margin-bottom:20px; background:#f0f0f0;} 

#div6{width:200px; height:50px; background:#0f0f0f;}

HTML部分:

<div id="div5"></div> 

<div id="div6"></div>

当第一个div是一个空div(没内容、没设定高)时,第一个div的空白边发生自我叠加。

CSS的叠加的更多相关文章

  1. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  2. css——权重叠加

    权重叠加 在下面的一段代码中,第一个样式body b有两个标签,第二个有一个标签b.两个中都有color,会应用哪一个呢?果是 那下面的代码会显示什么样的结果 结果是 应用的事body b中的colo ...

  3. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  4. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  5. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  6. javascript高级程序设计---CSS操作

    CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动.但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合. HTML元素的style属性 ...

  7. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  8. css 样式 记录

    /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...

  9. css的选择器效率分析

    我们都知道,CSS具有叠加性(同一个元素被多条样式规则指定),继承性(后代元素会继承前辈元素的一些样式和属性)和优先级 (由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定 ...

随机推荐

  1. WordPress博客教程:博客赚钱

    稍有关注独立博客的人都应该知道,中文博客实现盈利非常艰难,至少对于大部分中文博客来说是这样的.但很多时候我们不得不往赚钱的方向前进,至少要交得起域名和空间的租用费吧.不过期待赚钱前,你必须思考下如何提 ...

  2. C#winform控制textbox输入只能为数字

    添加keyPress事件,控制键盘输入只能是自然数: /// <summary> /// 控制键盘输入只能是自然数 /// </summary> /// <param n ...

  3. linux下php-fpm 启动参数及重要配置

    约定几个目录 /usr/local/php/sbin/php-fpm/usr/local/php/etc/php-fpm.conf/usr/local/php/etc/php.iniI. php-fp ...

  4. physical addressing virtual addressing 物理寻址 虚拟寻址

    Computer Systems A Programmer's Perspective Second Edition The main memory of a computer system is o ...

  5. Ubuntu/Deepin下常用软件汇总(持续更新)

    最近开始用Ubuntu了,好多软件都不是常用的了,在这边留底,以免忘记.如果没有写安装方法,则直接在软件源中可以找到 UNetbootin U盘制作工具,制作Ubuntu的安装U盘超好用 Braser ...

  6. Windows下查看机器监听端口

    1.查看所有端口占用情况 在开始-运行-cmd,输入:netstat –ano可以查看所有进程 2.查看指定端口的占用情况      netstat -an |findstr :21 

  7. Bluetooth GATT介绍

    目录 1. 介绍 2 内容 2.1 Configured Broadcast 2.2 GATT Profile Hierarchy 3 Service Interoperability Require ...

  8. CC2540 USB DONGLE 使用 BTool 调试BLE 说明

    一.Btool软件界面介绍 首先您要将USBDONGLE插入电脑的USB口,然后打开双击打开Btool软件,打开后如下图所示: 在安装驱动的教程中,我们已经记住了我们的USB DONGLE的串口号,在 ...

  9. springmvc返回值、数据写到页面、表单提交、ajax、重定向

    实验是在前一篇文章的项目上做的: 数据写到页面 后台往前台传数据 TestController添加 /** * 方法的返回值采用ModelAndView, new ModelAndView(" ...

  10. Maven实战(一)安装与配置

    1. 简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 如果你已经有十次输入同样的Ant targets来编译你的代码.jar或者w ...