CSS基础知识---浮动，定位和盒模型

转载请注明出处！

须要掌握的三个最重要的CSS概念是浮动，定位和盒模型。

 

盒模型概述：

页面上的每一个元素都被看作一个矩形框（元素框or盒模型），这个框由元素内容，内边距，边框和外边距组成。

内边距出如今内容区域的周围，若是为元素添加背景，那么背景就会应用于由内容和内边距组成的区域。添加边框会在内边距的区域外边加一条线。在边框外边是外边距，外边距是透明的，通常用它来控制元素之间的间隔。

内边距，边框，和外边距是可选的，默认值为零。可是许多元素由用户代理样式表设置了外边距和内边距，咱们能够将元素的margin和padding手动设置为零来覆盖这些浏览器样式！例如：

1 *{
2 
3          margin: 0;
4 
5          padding: 0;
6 
7 }      （不建议，建议使用全局的reset单独设置）

 

PS：在CSS中，width和height指的是内容区的宽度和高度。增长内边距，边框和外边距不会影响内容区的尺寸。但会增长元素框（盒模型）的总尺寸。

内边距，边框和外边距能够应用于一个元素的全部边，也能够用于单独的边。外边距还能够是负值，这能够用在多种技术中（例如margin-top：-10px;意思是说盒子向上移动10px）。

PS：IE6的混杂模式中使用本身的非标准的盒模型。这些浏览器的width属性不是内容的宽度，而是内容，内边距和边框的宽度总和。所以在固定width以后，添加的内边距越多，给内容留下的空间就越少。

 

外边距叠加：

简单地说就是，当两个或更多的垂直外边距相遇时，他们将造成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

当一个元素包含在另外一个元素中时（假设没有内边距或边框将外边距分隔开），他们的顶或底外边距也会发生叠加。

外边距甚至能够与自己叠加，假设一个空元素，它有外边距，可是没有边框或内边距。在这种状况下，顶外边距和底外边距碰到了一块儿，他们就会发生叠加。若是此时这个外边距和另外一个元素的外边距相碰，还会发生叠加。

这就是一系列空的段落元素占用的空间很是小的缘由。由于他们全部的外边距都叠加在了一块儿，造成一个小的外边距。

PS：只有普通文档流中的块框的垂直外边距才会发生叠加，行内框，浮动框或绝对定位框之间的外边距不会发生叠加。

（参考连接：http://www.smallni.com/collapsing-margin/）

 

 

定位概述：

1.       可视化格式模型

两个框一个属性：块框和行内框+display(block, inline, none)属性。

CSS中三种基本的定位机制：普通流，浮动和绝对定位。除非专门指定，不然全部的框都在普通流中定位。顾名思义，普通流中元素的位置由元素在HTML中的位置决定。

块框，从上到下一个接一个的垂直排列，框之间的垂直距离由框的垂直外边距计算出来。

行内框，在一行中水平排列。可使用水平内边距，边框和水平外边距调整他们的水平间距。注意：可是垂直外边距，边框和内边距不影响行内框的高度。一样在行内框上显式的设置高度和宽度也没有影响。行内框的高度老是足以容纳它所包含的全部行内框。可是设置行高能够增长这个框的高度，因此，修改行内框的惟一方法是修改行高或者水平内边距，外边距或边框。

好在CSS2.1容许把元素的display属性设置为inline-block。这个声明让元素像行内元素同样水平的依次排列。可是，框的内容仍然符合块框的行为，例如能显式的设置宽度，高度和垂直外边距和内边距。FireFox3.0及以上，IE8以及Safari和Opera的高版本支持此属性值。

 

另外匿名行框和匿名块框的定义做了解：

匿名块框：将一些文本添加到一个块级元素的开头时候，即便没有把这些文本定义为块级元素，它们也会被当作块级元素对待，例如：

1 <div>
2 
3          some text                //匿名块框
4 
5          <p>some more text</p>
6 
7 </div>

 

匿名行框：假设有一个包含三行文本的段落，每行文本会造成一个匿名行框。

咱们没法直接对匿名块或行框应用样式。

 

2.       相对定位

经过设置元素的垂直和水平位置，元素“相对于”它的起点进行移动。

 

在使用相对定位的时候，元素仍然占据原来的空间。所以，移动元素会致使他覆盖其余框。

相对定位实际上是被看作普通流定位模型的一部分，由于元素的位置是相对于他在普通流中的位置。

 

3.       绝对定位

与相对定位相反，绝对定位是是元素的位置与文档流无关，所以不占据空间。普通流中的其余元素的布局就像绝对定位的元素不存在时同样。

 

绝对定位的元素的位置是相对于距离他最近的那个已定位的祖先元素肯定的，若是元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。根据用户代理的不一样，初始包含块多是画布或HTML元素。

经过设置z-index属性来控制据对定位的框的叠放顺序，z-index值越高，框在栈中的位置就越高。

相对于已经相对定位的祖先元素对框进行绝对定位，在大多数现代浏览器中实现的很好。可是在Windows上的IE5.5和IE6有bug。若是相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么须要确保相对定位的框已经设置了尺寸（宽度和高度）。

在进行页面布局的时候，绝对定位是很是有用的，尤为是在使用了相对定位的祖先元素的状况下。

由于绝对定位的元素与文档流无关（不占位），因此他们不影响普通流中的框。若是扩大绝对定位的框（例如，经过增长字号），周围的框（指普通文档流中的框）不会从新定位（而相对定位是占位的），所以尺寸的任何改变都会致使绝对定位的框产生重叠，从而破坏布局。

 

4.       固定定位

固定定位是绝对定位的一种，，差别在于固定元素的包含块是视口（viewport），这样咱们能够建立老是出如今窗口相同位置的浮动元素。

IE6和更低版本不支持，IE7部分支持这个属性，在实现中有许多bug。

 

5.       浮动

浮动框能够左右移动，直到它的外边缘碰到包含框或另外一个浮动框的边缘。

由于浮动框不在文档的普通流中，因此文档的普通流中的块框表现的就像浮动框不存在同样。

 

 

若是包含块太窄，没法容纳水平排列的3个浮动元素，那么其余浮动块，向下移动，直到有足够的地方。若是浮动的元素高度不一样，那么当他们向下移动时可能会被其余浮动元素“卡住”。以下图：

 

 

行内框和清理：

浮动会让元素脱离文档流，再也不影响不浮动的元素。实际上，并不彻底如此。若是浮动元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动根本不存在同样。可是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术上的术语来讲就是，浮动元素旁边的行框被缩短，从而能给浮动元素留出空间，所以行框围绕浮动框。实际上，建立浮动框是文本能够环绕图像，以下图：

 

要想阻止行框围绕在浮动框的外边，须要对包含这些行框的元素应用clear属性，clear(清理元素)的工做原理是：浏览器在元素的顶上添加足够的外边距，使元素的顶边缘垂直降低到浮动框下面。以下图：

 

 

清除浮动方法

（参考连接：http://www.cnblogs.com/ForEvErNoME/p/3383539.html）

方法1：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性便可清理浮动。亦可以使用<br class="clear" />或<hr class="clear" />来进行清理。

优势：简单，代码少，浏览器兼容性好。

缺点：须要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法2：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;能够清除浮动，另外在 IE6 中还须要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法3：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性便可清除内部浮动，可是这样会使其总体浮动，影响布局，不推荐使用。

方法4：使用邻接元素处理

什么都不作，给浮动元素后面的元素添加clear属性。

方法5：使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，表明一个元素以后最近的元素）和 IEhack ，能够完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，而后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

经过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，而且赋予clear属性来清除浮动。须要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。 

总结：

经过上面的例子，咱们不难发现清除浮动的方法能够分红两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素能够包含浮动元素。

推荐：

在网页主要布局时使用:after伪元素方法并做为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；若是自己就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理以前的浮动。

最后可使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。

《CSS mastery》读书笔记！

For my lover, CC!