CSS布局模型

以下是基本知识，实例分析请看另一篇文章：CSS布局模型实例分析

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)

3、层模型（Layer）

布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

流动模型Flow

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型Float

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示------>设置元素浮动。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

float语法：

float : none | left |right

div{    width:200px;    height:200px;    border:2px red solid;    float:left;}<div id="div1"></div><div id="div2"></div>

问题：

1.float: right 右浮动时，靠右换行（错行）的解决方法

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。

<!--按下面这种顺序输入的方法是错误的:-->{forum}{subject}<span style="float: right">{date1}</SPAN><!--正确的方法:--><span style="float: right">{date1}</SPAN>{forum}{subject}

2.浮动换行

两个div设置了左浮动，想第三个div换行

1.两个div的父元素设置宽度100%，float:left;第三div就换行了。

2.给第三div设置style="clear:both",或者增加一个空div <div style="clear:both"></div>，或者加<br />这就是下面的清除浮动。

3.清除浮动

http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

解决方法：

3.1 有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。

用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。

3.2 一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中置“overflow”的属性值为“auto”

在IE6里面，父容器是需要设置一个“width”和“height”。因为高度可能是一个变量，宽度为100%，他们将能正常的工作。使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。

使用“overflow”技巧清除浮动，确实存在一些缺点。例如：当你添加样式，或者将嵌套在里面的“span”元素移动到父容器的外面，或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中，你可以看到元素的盒子阴影被切断在父元素之内。

要慎用overflow属性，因为 设置overflow为非visible值，将导致容器生成新的格式化上下文，其布局、相对于浮动的行为等会发生显著变化，清除浮动只不过这一系列变化的其中一个附带作用。

更多弊端的表现，不论是早先Firefox无端的产生focus、还是在某些情况下触发滚动条、截断绝对定位的层，等等等等，太多了。

3.3  根据上下文，清除浮动更好的方法是clearfix技巧。

3.3.1基本上是用：父元素上使用after伪元素来新加一个内容    再谈清除浮动：https://swordair.com/on-clearing-float-again/

   .clearfix:after {    content: ".";     /**//*内容为“.”就是一个英文的句号而已。如果不写在Firefox下会有问题。*/    display: block;   /**//*加入的这个元素转换为块级元素。*/    clear: both;     /**//*清除左右两边浮动。*/    visibility: hidden;      /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/    line-height: 0;    /**//*行高为0；*/    height: 0;     /**//*高度为0；*/    font-size:0;    /**//*字体大小为0；*/}.clearfix { *zoom:1;}   /**//*这是针对于IE6/7的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/.clearfix {display: inline-block;} /* for IE/Mac 鉴于Mac版IE的稀少到可以忽略的占有量以及验证问题，可以忽略*/

：after伪元素内容是一个点，本身用来清除浮动，其他代码则是为让这个伪元素不可见。所以很多其他的版本里，可能还会添加 font-size:0;line-height:0; 来进一步保证元素不可见。

3.3.2 还有一个改进的做法：before和after两个伪元素来做，但是还是上面比较常用。http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪元素。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。

“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。.clearfix:before,.clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;}.clearfix{  *zoom: 1;}

 单个伪元素（下面不是很明白是什么意思）

值得注意的是，目前每个元素只有一个“:before”和“:after”伪元素。当你尝试使用其他的“:before”和“:after”的clearfix技巧，你的内容可能无法达到想要的效果。

层模型Layer

设置这三个才能用定位属性left、right、top、bottom，

优先级：top>bottom； left和right的优先级取决于语言，eg:left>right(英语) left<right(阿拉伯语)

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

CSS定义了一组定位（positioning）属性来支持层布局模型。

这个文章特别好http://www.tuicool.com/articles/IBJvyy7下图出自这篇文章

层模型有三种形式：

1、绝对定位(position: absolute)   相对其最近有定位的祖先进行定位，脱离流

2、相对定位(position: relative)   相对其正常流中的默认位置偏移，不脱离流

3、固定定位(position: fixed)

z-index:整数；   如果设置了以上三个中任意一个定位，就可以用他实现层叠次序，数越大，越在上面。

                         一般来说，在DOM中，元素出现的时候就放置在z轴上。

.box-1{    top:10px;}.box-2{    top:140px;    left:100px;    z-index: 2;} .box-3{    top:80px;    left:280px;    z-index: 1;}.box-4{    top:10px;    right:10px;}.box-5{    top:140px;    right:40px;}.box-6{    top:80px;    right:180px;}

<div class=" group box_set">    <div class="box box-1">1</div>    <div class="box box-2">2</div>    <div class="box box-3">3</div>    <!--<div style="clear:both"></div>-->    <div class="box box-4">4</div>    <div class="box box-5">5</div>    <div class="box box-6">6</div></div>

1.设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

div{    width:200px;    height:200px;    border:2px red solid;    position:absolute;    left:100px;    top:50px;}<div id="div1"></div>

2.设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。 相对于以前的位置移动，偏移前的位置保留不动。

#div1{    width:200px;    height:200px;    border:2px red solid;    position:relative;    left:100px;    top:50px;}<body>    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></body>

虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

3. position: fixed表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

<!--HTMLfixed用于固定侧栏，低栏，菜单栏-->< footer >Fixed Footer </footer><!--CSS-->footer {  bottom: 0;  left: 0;  position: fixed;  right: 0;}

4.Relative与Absolute组合使用 http://www.imooc.com/code/3585

使得一个元素A相对于(参照元素)另一个元素B定位，条件：

1.参照元素B是定位元素A的前辈元素

2.参照元素B设为 position:relative;    定位元素A设为position:absolute;

这样定位元素A就可以top right bottom left 进行相对于参照元素B进行定位了。

<A> <B></B></A>A{position:relative;}B{position:absolute;right:10px;top:10px;(left:10px;bottom:10px;}

B参照A进行定位，B在离A右边10px，离A顶端10px定位，（B在离A左边10px，A底部10px定位）