ch3 盒模型、定位

最新推荐文章于 2025-11-16 15:02:20 发布

转载最新推荐文章于 2025-11-16 15:02:20 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lmjZone/p/7738116.html

本文深入探讨CSS中的标准盒模型、怪异盒模型、外边距叠加现象，以及三种基本定位机制：普通流、浮动、绝对定位。通过实例解析如何处理浮动元素、实现元素的相对与绝对定位，同时介绍清理浮动的方法，包括使用clear属性和overflow属性。

标准盒模型、怪异盒模型

外边距叠加

当两个或者争夺垂直外边距相遇时，他们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加。

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

外边距可以与本身发生叠加。假设有一个空元素，它有外边距，但是没有边框或内边距，这种情况下，顶外边距与底外边距就碰在一起，发生叠加。

上述情况，如果这个外边距碰到另一个元素的外边距，还会发生叠加。

外边距叠加实际上有重要意义，例如下图：由几个段落组成的典型文本页面，第一个段落上面的空间等于段落的顶外边距，如果没有外边距叠加，后续的所有段落之间的空间将是相邻顶外边距和底外边距的和，则段落之间的空间是页面顶部的两倍。若发生外边距叠加，段落之间的顶外边距和底外边距就叠加在一起，这样各处的距离就一致了。

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

定位

1. 可视化格式模型

p、h1或div等元素被称为块级元素，意味着这些元素显示为一块内容，即“块框”。
strong和span等元素被称为行内元素，因为它们的内容显示在行中，即“行内框”。
可使用display属性改变生成的框的类型：
display=none：让生成的元素根本没有框，这样，这个框及其所有内容就不再显示，不占用文档中的空间。
display=block：让行内元素表现的像块级元素一样，元素占据整行空间，可以定义元素的尺寸。
display=inline：一般是不会定义元素的尺寸的，它是行内流动性的布局，其尺寸由Font-size决定。
display=inline-block：让元素像行内元素一样水平的依次排列，但是框的内容仍然符合块级框的行为，即能显式的设置宽度、高度、垂直外边距、内边距，既有行内流动又有尺寸。
块级框：从上到下一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出来。
行内框：在一行中水平排列。可使用水平内边距、边框、外边距来调整它们的水平间距，但垂直内边距、边框、外边距都不影响行内框的高度，在行内框上设置显式的高度或者宽度也是没有用的。
行框：由一行形成的水平框成为行框，行框的高度总是足以容纳它包含的所有行内框，行框的高度由行高line-height设置。
修改行内框尺寸的唯一办法是修改行高（修改高度）或者水平边框、内边距、外边距（修改宽度）。
匿名块框：大多数框都是由显式定义形成的，但有一种情况，即使没有显式定义也会创建块级元素，即：将一些文本（代码中的some text）添加到一个块级元素的开头时，即使没有把这些文本定义为块级元素，它也会被当成块级元素对待。

<div>
   some text
   <p>Some more text</p>
</div>

CSS有3种基本的定位机制：普通流、浮动、绝对定位。除非专门指定，否则所有框都在普通流中定位，普通流中元素框的位置由元素在HTML中的位置决定。

2. 相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或水平位置，让这个元素“相对于”它的起点移动。如下：

#myBox{
    position:relative;
    left:20px;
    right:20px;
}

无论是否移动，元素仍然占据原来的空间，因此，移动的元素会导致它覆盖其他框。
相对定位被看作普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。

3. 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间，不影响普通流中的框，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样，所以他可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的叠放次序，z-index值越高，框在栈中的位置就越高。绝对定位的元素的位置是相对于距离它最近的已定位的祖先元素（例如：position=relative等，position=static是不可以的）确定的，若没有已定位的祖先元素，那它就相对于初始包含块的。绝对定位的框可以从它的包含块向上、下、左、右移动。

固定定位

固定定位是绝对定位的一种，差异在于固定元素的包含块是视口，所以创建的是出现在窗口中相同位置的浮动元素。

4. 浮动

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘，浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样。实际上并不完全如此，如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现的像浮动根本不存在一样，但框的文本内容会受到浮动元素的影响，会移动以留出空间，因此行框围绕浮动框，即浮动框使文本可以围绕图像。

清理浮动：clear属性

要阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性，值可以是left、right、both、none，表示框的哪边不应该挨着浮动框，清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。

例子：有一张图片，希望让它浮动到一个文本块的左边，然后让这个图片和文本包含在另一个具有背景颜色和边框的元素中。

<div class="new">
    <img src=""/>
    <p>Some text </p>
</div>
.new{
    background-color:gray;
    border:solid 1px black;
}
.news img{
    float:left;
}
.new p{
    float:right;
}

结果如下：因为浮动元素脱离文档流，所以div.new不占据空间

如何让包围元素在视觉上包围浮动元素？

在这个元素的某个地方应用clear：因为在例子中没有现有的元素可以清理，所以需要在最后一个段落下面添加一个空元素并且清理它。

<div class="new">
    <img src="" />
    <p>Some text </p>
    <br class="clear" />
</div>
.new{
    background-color:gray;
    border:solid 1px black;
}
.news img{
    float:left;
}
.new p{
    float:right;
}
.clear{
    clear:both;
}

结果如下：

还可以不对浮动的文本和图像进行清理，而是选择浮动div容器：
```
<div class="new">
    <img src="" />
    <p>Some text </p>
</div>
.new{
    background-color:gray;
    border:solid 1px black;
    float:left;
}
.news img{
    float:left;
}
.new p{
    float:right;
}
```
这种做法产生的问题：下一个元素会受到这个浮动元素的影响，为解决这个问题，有人选择浮动布局中的所有东西，然后使用合适的元素对这些浮动元素进行清理，这有助于减少或消除不必要的标记，但是浮动也会变得复杂，因此，许多人还是喜欢添加少量的额外标记。