正文
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来决定。例如：
当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：ｗｉｄｏｗ：本意是: "寡妇, 夺走", 在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:ｈｉｄｄｅｎ的 最多, 最自然, 最为贴切.
所以, 我们看到, 给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进行划分的 互不干涉, 会收到意想不到的效果!
原因? 本身是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>
