CSS的叠加
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"> </div> <div id="div3">
<div id="div4">
</div>
</div> <div id="div2"> </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的叠加的更多相关文章
- css图片叠加和底部定位
css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...
- css——权重叠加
权重叠加 在下面的一段代码中,第一个样式body b有两个标签,第二个有一个标签b.两个中都有color,会应用哪一个呢?果是 那下面的代码会显示什么样的结果 结果是 应用的事body b中的colo ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- javascript高级程序设计---CSS操作
CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动.但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合. HTML元素的style属性 ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- css 样式 记录
/* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...
- css的选择器效率分析
我们都知道,CSS具有叠加性(同一个元素被多条样式规则指定),继承性(后代元素会继承前辈元素的一些样式和属性)和优先级 (由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定 ...
随机推荐
- WordPress博客教程:博客赚钱
稍有关注独立博客的人都应该知道,中文博客实现盈利非常艰难,至少对于大部分中文博客来说是这样的.但很多时候我们不得不往赚钱的方向前进,至少要交得起域名和空间的租用费吧.不过期待赚钱前,你必须思考下如何提 ...
- C#winform控制textbox输入只能为数字
添加keyPress事件,控制键盘输入只能是自然数: /// <summary> /// 控制键盘输入只能是自然数 /// </summary> /// <param n ...
- linux下php-fpm 启动参数及重要配置
约定几个目录 /usr/local/php/sbin/php-fpm/usr/local/php/etc/php-fpm.conf/usr/local/php/etc/php.iniI. php-fp ...
- physical addressing virtual addressing 物理寻址 虚拟寻址
Computer Systems A Programmer's Perspective Second Edition The main memory of a computer system is o ...
- Ubuntu/Deepin下常用软件汇总(持续更新)
最近开始用Ubuntu了,好多软件都不是常用的了,在这边留底,以免忘记.如果没有写安装方法,则直接在软件源中可以找到 UNetbootin U盘制作工具,制作Ubuntu的安装U盘超好用 Braser ...
- Windows下查看机器监听端口
1.查看所有端口占用情况 在开始-运行-cmd,输入:netstat –ano可以查看所有进程 2.查看指定端口的占用情况 netstat -an |findstr :21
- Bluetooth GATT介绍
目录 1. 介绍 2 内容 2.1 Configured Broadcast 2.2 GATT Profile Hierarchy 3 Service Interoperability Require ...
- CC2540 USB DONGLE 使用 BTool 调试BLE 说明
一.Btool软件界面介绍 首先您要将USBDONGLE插入电脑的USB口,然后打开双击打开Btool软件,打开后如下图所示: 在安装驱动的教程中,我们已经记住了我们的USB DONGLE的串口号,在 ...
- springmvc返回值、数据写到页面、表单提交、ajax、重定向
实验是在前一篇文章的项目上做的: 数据写到页面 后台往前台传数据 TestController添加 /** * 方法的返回值采用ModelAndView, new ModelAndView(" ...
- Maven实战(一)安装与配置
1. 简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 如果你已经有十次输入同样的Ant targets来编译你的代码.jar或者w ...