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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转载请注明出处！

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

盒模型概述：

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

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

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

 *{

          margin:;

          padding:;

 }      （不建议，建议使用全局的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的高版本支持此属性值。

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

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

 <div>

          some text                //匿名块框

          <p>some more text</p>

 </div>

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

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

2. 相对定位

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

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

相对定位其实是被看做普通流定位模型的一部分 ，因为元素的位置是相对于他在普通流中的位置。

3. 绝对定位

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

绝对定位的元素的位置是相对于距离他最近的那个已定位的祖先元素确定的，如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的。根据用户代理的不同，初始包含块可能是画布或HTML元素。

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

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

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

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

4. 固定定位

固定定位是绝对定位的一种，，差异在于 固定元素的包含块是视口（ viewport ），这样我们可以创建总是出现在窗口相同位置的浮动元素。

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

5. 浮动

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

因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。

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

行内框和清理：

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

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