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：　ｗｉｄｏｗ：本意是: "寡妇, 夺走", 在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 ....></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就可以了.