css外边距合并和z-index的问题
参考这篇文章, 将外边距的 折叠
参考这篇文章, 将bfc的生成, bfc的应用
参考这篇文章
position: absolute的元素, 仍然具有内填充padding和border边框属性样式, 但没有 外边距margin属性?
这个说法是错误的! 实际操作表明, 所有的style样式属性都是具有的!
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
z-index 与 position属性的关系?
关于stacking context的问题?
当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。
当任何一个元素层叠另一个包含在不同stacking context元素时,则会以stacking context的层叠级别("stack level")来决定显示的先后情况。也就是说,在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定。例如:
定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟关系(z-index:200)。你会发现无论A1的z-index是多大,也会被z-index是200的B所覆盖,因为A的z-index只有100。
w3school对z-index的说明:
- z-index只对 "定位元素" 有效, 对float定位无效
没有定位的元素, 按" 自然堆叠" 的原则进行排列
而对于非 (定位) 元素,注定是平面排列,(绝不可能重叠?) 因此对它们来讲,zindex固定为0,你再设什么值也是无效的。
(自然排列 的元素的 z-index默认值是auto 或者为 0, 或者说就是 当前层 !
z-index的默认值为: "auto" -- 意思是"与父元素的堆叠顺序相同"
z-index的取值: auto或者具体的number, 它又没有继承性.
只要是 position定位元素, 即使没有显式的写 z-index, 但是它的z-index: auto仍然是存在的!
在自然的堆叠顺序下, 是按这样排列的:
按z轴排列顺序, 由远及近:
最远的/ 最后面的 是 具有 负的z-index的元素.(当然要定位元素);
因为负值的z-index元素, 在z轴上堆叠排列时, 会排在整个 stacking context的后面, 根本就不参与对比了!然后是: 没有定位, 没有浮动的元素, 按 其在文档流 的先后顺序堆叠, "back-to-front";
然后是: 浮动元素;
然后是: 内联元素,按照出现的先后顺序排列排列
最后是: 定位元素, 即最前面是 "定位元素".
position定位元素, 只是说明了, 这个元素是可以定位的, 不管它取什么值, 只是说明了它相对定位的参考物不同, 但实际上定位的性质是一样的. 所以, 最重要的是, 如果只给元素声明 position属性, 即使是fixed, 但是如果 并没有指明偏移 定位的距离, 即top left等样式属性, 元素的位置 其实还是在原来的位置 其实还是 不动的!!!
最好不要使用负值z-index! z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。
dreamwaver的语法高亮, 自动补全, 代码格式化等等功能, 都是通过配置文件( 一般都是 *.xml文件 ) 来实现的:
在dw的安装目录下的 : configuration>CodeHints> CodeHints.xml中, 通过修改 删除 排序<menuitem name="widows"....>可以修改dw的语法提示等等...
** widows: widow:本意是: "寡妇, 夺走", 在dw的css中, 是设置文档的 "打印"属性, 在分页打印时留在上一页 的行数, 这个通常是没有用的, 而且大多数浏览器都不支持"
【在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?】
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
边距折叠时的情况:
- 两个相邻盒子的外边距都为整数.取他们两者之间的较大的值。
- 两个相邻盒子的外边距都为负数,取他们两者之间绝对值较大的值。
- 两个相邻盒子的外边距为一正一负,取两者和。
如何不让相邻元素外边距合并:
使得其中一个元素浮动起来。
使得其中一个元素触发BFC:例如设置position:absolute、position:fixed、设置overflow:hidden、overflow:auto、display:table-cell、display:inline-block;
如何生成BFC, 以及BFC的用途?
可以有四种生成BFC的方法:
- 根元素 body, html这个是自然的
- float: 只要不为none;
- overflow: 只要不为visible;
- display: 为inline-block, table, table-cell等
- position: 为 absolute, fixed
其中, 使用 overflow:hidden的 最多, 最自然, 最为贴切.
所以, 我们看到, 给div使用 overflow: hidden, 并不是随意的, 其根本的目的就是为了生成 BFC
BFC是页面内独立渲染的一个块, 其内部的子元素, 遵循BFC的特定规则, 并且对外部元素, 没有影响, 外部的元素, 也不会影响BFC内的元素
BFC就像一个 坚固 的盒子, 将内部和BFC的外部 相隔离 开来!
BFC的用途:
包围浮动元素: 原理: 在BFC内部的排列规则: bfc内部的浮动子元素的高度, 也会被计算在父元素的高度内. 而父元素块的高度 默认的是
auto的, 包含的子元素的最高点到最低点之间的距离, 就是父元素块的高度. 如果父元素不是BFC, 那么, 其高度就是0, 这样, 其中的浮动子元素就
会跑出去, 解决方法就是 使 父元素称为 BFC: 可以浮动父元素, 也可以 让父元素: overflow: hidden, 当然还有其他 上面的2种方法.
多栏布局: 双飞翼布局/ 圣杯布局 /更加灵活的布局
原理:BFC元素, 不会和与之相邻的 浮动元素相重叠.
========================================
多栏布局的一种方式:(原理: 与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。)利用该特性可以作为多栏布局的一种实现方式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left{
background:pink;
float: left;
width:180px;
}
.center{
background:lightyellow;
overflow:hidden; // 这种实现方式最为自然, 最接近自然的文档流, 用得最多
}
.right{
background: lightblue;
width:180px;
float:right;
}
</style>
</head>
<body class="claro">
<div class="container">
<div class="left">
<pre>
.left{
background:pink;
float: left;
width:180px;
}
</pre>
</div>
<div class="right">
<pre>
.right{
background:lightblue;
width:180px;
float:right;
}
</pre>
</div> <!-- 左中右三块 都不一定 按顺序写 -->
<div class="center">
<pre>
.center{
background:lightyellow;
overflow:hidden;
height:116px;
}
</pre>
</div>
</div>
</html>
这种布局的特点在于左右两栏宽度固定,中间栏可以 "根据 浏览器宽度自适应" 。(还有窄左 宽自适应右, 窄右 宽的自适应左等等 布局).
使用伪类解决 浮动框引起 的父元素高度塌陷
<style type="text/css">
.all:after {
content: "";
display: block; /* 增加的伪类, 这里一定要写上 display: block; */
clear:both;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
如何解决 浮动框引起父元素高度塌陷
<div class="all" style="background-color: blue; border: 2px solid gold; ">
<div style="background-color: red; border: 2px solid green; height: 100px; width: 300px; float:left; ">
</div>
<div style="background-color: green; border: 2px solid red; height: 100px; width: 200px; float:left; ">
</div>
</div>
</body>
写层次性的 "名字空间" 的css
要习惯于 写父元素的类 名字空间的 层次书写;
通常要 从父元素写起, 这样就可以形成模块化, 而且按div进行划分的 互不干涉, 会收到意想不到的效果!
消除 div设置成 inline, inline-block时 的间距和空格
原因? 本身是inline内联的元素之间, 如span, img等等, 是会解析 "空格" 和 "换行"的, 它们之间是有间距的. 注意这个间距是说的元素标签之间如 "span" "img" 之间的空格和换行, 不是指标签内部包含的 内容里面的空格和换行.
这个问题的背景是: 当我们要把div 块设置为 inline, inline-block的时候, 而且设置了边框的时候, 由于div (注意是标签)之间的书写空格 或者换行, 会使 边框和边框之间 产生空格 间距. 而实际我们在排版时, 往往想要 这些框框完全挨着, 相互之间不要留空格.
解决方法:
一是: 在各标签之间的书写上, 不留空格, 如:
<div ....></div><div ...></div>.... // 不分行书写
<div ...></div><!--
--><div...></div><!--
--><div ...></div>
<div ...>...</div
><div ...>...</div
><div ...>...</div>
二是: 将这些要消除空格的 float 的div 放在一个大的 div容器中, 然后设置父div容器的font-size:0, 而其他子div则设置它自己的正确的 font-size
<style type="text/css">
.container {
font-size: 0;
border: 1px solid #aaa;
/*overflow: hidden;*/ // 这里就不需要写overflow了, 因为inline, inline-block, 不像float元素, 不会引起 父元素"高度塌陷"
}
.container div {
font-size: 14px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div style="height: 100px; width: 100px; background-color: lightblue; border: 1px solid #aaa;"></div>
<div style="height: 100px; width: 100px; background-color: lightgreen; border: 1px solid #bbb;"></div>
<div style="height: 100px; width: 100px; background-color: lightyellow; border: 1px solid #ccc;"></div>
</div>
</body>
这里特别要澄清一个误解: 就是: 不管是原生的inline元素, 如span img, 还是通过设置display:inline, inline-block的 div, 都不会对父元素引起 "高度塌陷", 都不会像 float元素那样引起 问题, 因为不像 float那样 会脱离文档流. 它们还是 在文档流中 正常排列, 只是不 竖直 排列, 而是横向水平排列.
颜色的选择, light???的颜色好像比 ???颜色要 好看一些!
边框的选择, 一般用1px, solid, #颜色一般用#aaa, #bbb, #ccc就可以了.
css外边距合并和z-index的问题的更多相关文章
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
- CSS 外边距合并。
<div id = "parent"> <div id = "child"> demo </div> </div> ...
- CSS外边距合并&块格式上下文
前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...
- CSS外边距合并(塌陷/margin越界)
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...
- CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
- CSS外边距合并问题
今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
随机推荐
- BZOJ 4384: [POI2015]Trzy wieże
4384: [POI2015]Trzy wieże Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 217 Solved: 61[Submit][St ...
- 【BZOJ-2725】故乡的梦 Dijsktra + Tarjan + Dinic + BFS + 堆
2725: [Violet 6]故乡的梦 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 502 Solved: 173[Submit][Status ...
- java.io.IOException: Timed out waiting 20000ms for a quorum of nodes to respond
16-11-14 21:23:41,540 FATAL org.apache.hadoop.hdfs.server.namenode.FSEditLog: Error: starting log se ...
- 【poj1741】 Tree
http://poj.org/problem?id=1741 (题目链接) 题意 给出一个n个节点的带权树,求树上距离不超过K的所有点对的个数. solution 点分治裸题.所谓的点分治,就是对于 ...
- Jenkins/CCNET发送邮件策略和注意事项,以及邮箱类型的选择
QQ邮箱永远也不要用,原因:安全机制太强导致在CCNET/Jenkins中极难配置,且反垃圾太强,有些项目会涉及到敏感词一样屏蔽,如果发邮件找客服求助时,基本是无果. 如果在免费领域,推荐使用免费企业 ...
- 数据结构算法C语言实现(二十)--- 6.3.1遍历二叉树
一.简述 二叉树的遍历主要是先序.中序.后序及对应的递归和非递归算法,共3x2=6种,其中后序非递归在实现上稍复杂一些.二叉树的遍历是理解和学习递归及体会栈的工作原理的绝佳工具! 此外,非递归所用的栈 ...
- HDU 4223 Dynamic Programming?(最小连续子序列和的绝对值O(NlogN))
传送门 Description Dynamic Programming, short for DP, is the favorite of iSea. It is a method for solvi ...
- 导入.pch文件
Xcode5中创建一个工程的时候,系统会自动创建一个以以工程名为名字的pch(Precompile Prefix Header)文件,开发的过程中可以将广泛使用的头文件以及宏包含在该文件下,编译器就会 ...
- 一个WPF控件 诡异的MouseEvent 。
背景: private System.Windows.Controls.Border _borderTouch; private bool _mouseDown = false; private S ...
- N-Gram
N-Gram是大词汇连续语音识别中常用的一种语言模型,对中文而言,我们称之为汉语语言模型(CLM, Chinese Language Model). 中文名 汉语语言模型 外文名 N-Gram 定 ...