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的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定 ...
随机推荐
- git的某些默认行为--会推送pull的内容,即使commit的时候不显示
今天一不小心又在git上犯了个大错误,用gitflow之前进行过pull分支的操作,然后用IDE选择修改的文件提交,可是推送的时候把pull的内容也推送到远程服务器了,提交的时候用git status ...
- 控制变量法-初中物理-Nobel Lecture, December 12, 1929-php执行SET GLOBAL connect_timeout=2效果
$link = mysqli_connect("localhost", "wu", "wp", "wdb"); $sql ...
- 统计学习方法笔记 -- Boosting方法
AdaBoost算法 基本思想是,对于一个复杂的问题,单独用一个分类算法判断比较困难,那么我们就用一组分类器来进行综合判断,得到结果,"三个臭皮匠顶一个诸葛亮" 专业的说法, 强可 ...
- volatile in thread
public class TestCalc { public static void main(String[] args) { class StoppableThread extends Threa ...
- Eclipse 安装插件【转】
本文介绍Eclipse插件的安装方法.Eclipse插件的安装方法大体有三种:直接复制.使用link文件,以及使用eclipse自带的图形界面的插件安装方法. AD: 做为当下最流行的开源IDE之一, ...
- Redis学习笔记(8)-发布/订阅
package cn.com; import java.util.List; import redis.clients.jedis.Jedis; public class Redis_PubSub { ...
- html5优势
1.首先,强化了Web网页的表现性能.除了可描绘二维图形外,还准备了用于播放视频和音频的标签.2.其次,追加了本地数据库等Web应用的功能.3.HTML5(text/html)浏览器将在错误语法的处理 ...
- VS2013修改MVC4默认生成的模板
找到以下目录,根据VS版本和安装目录不同相应改动: I:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTempla ...
- android监听屏幕打开关闭广播无响应的情况
android在屏幕打开和关闭的时候会发出广播,但是如果receiver配置在AndroidManifest.xml中时,receiver是接受不到任何广播的. <receiver androi ...
- java的Random
首先,Point类 public class Point { int x, y; public Point(int x, int y) { this.x = x; this.y = y; } bool ...