CSS定位
css定位（positioning）属性允许你对元素进行定位。
css定位和浮动概述
- css为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分
重叠可以完成
很多需要表格才能完成的任务。
- 定位的基本思想很简单，它允许定义元素相对于父元素，另一个元素甚至浏览器窗口本身的位置。
- 浮动框可以左右移动，直到它的外边框碰到包含款或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框无视浮动框的存在。
一切皆为框
div，h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。- 我们可以使用
display属性改变生成的框的类型。 - 在一种情况下，即使没有进行显示定义，也会创建块级元素。这种情况就是把一些文本添加到一个块级元素（比如
div）的开头。
<div>
some text
<p>Some more text.</p>
</div>
👇运行结果👇
上述情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
display
display属性规定元素应该生成的框的类型- 这个属性用于定义建立布局时元素生成的显示框类型，对于HTML等文档类型，如果使用
display不谨慎很有可能会违反HTML中已经定义的显示层次结构。对于XML，由于XML中没有内置的这种层次结构，所以display是绝对必要的。 - JavaScript语法👇
object.style.display="inline"
| 值 | 描述 |
|---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
inline-block | 行内块元素。 |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | 已经删除。 |
marker | 已经删除。 |
table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
table-column | 此元素会作为一个单元格列显示（类似 <col>） |
table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
inherit | 规定应该从父元素继承 display 属性的值。 |
css定位机制
- css有三种基本的定位机制：普通流、浮动流和绝对定位。
- 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置在HTML中的位置决定。
- 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的。
- 行内框在一行中水平布置。可以使用水平行内距，边框和外边距调整他们的间距。但是，垂直内边距，边框和外边距不影响行内框的高度。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
position
position属性规定元素的定位类型。- JavaScript语法👇
object.style.position="absolute"
position属性值的含义：static：元素框正常生成（默认）。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。(忽略top，bottom，left，right或者z-index声明)relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。（例如“left：20”会向元素的left位置添加20像素）abosulute：元素框从文档流中完全删除，相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。（相对于static定位以外的第一个父元素进行定位，元素位置通过left、top、right、bottom属性进行规定）fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。（相对于浏览器窗口进行定位，元素位置通过left，top，right，bottom属性进行规定）inherit：规定应该冲父元素继承position属性的值
- 提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
css相对定位
设置为相对定位的元素会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
css相对定位
- 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
- 如果将
top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
👇运行结果👇
- 注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框架。
css绝对定位
设置绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流总所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
css绝对定位
- 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对与它在普通流中的位置。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
👇运行结果👇
- 绝对定位的元素的位置相对与最近已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块。
- 注意：根据使用不同，最初的包含块可能是画布或HTML元素。
- 提示：因为绝对定位的框与文档流无关，所以它们可以覆盖在页面上的其他元素。可以通过
z-index属性来控制这些框的堆放次序。
z-index
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。- 元素可拥有负的
z-index属性值 z-index仅能在定位元素上奏效！- 该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则离用户更远。
- JavaScript语法👇
object.style.zIndex="1"
| 值 | 描述 |
|---|---|
auto | 堆叠。堆叠顺序与父元素相等 |
number | 设置元素的堆叠顺序 |
inherit | 规定应该从父元素继承z-index属性的值 |
css浮动
浮动框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边缘为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css浮动框
- 当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边框边缘碰到包含框的右边缘👇
- 当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。👇
- 👆如果把所有三个框都向左移动，那么框1向左浮动知道碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
- 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它元素“卡住”👇
float
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在css中，任何元素都可以浮动。浮动框元素会生成一个块级框，而不论它本身是何种元素。- 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能的窄。
- 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
- JavaScript语法👇
object.style.cssFloat="left"
| 值 | 描述 |
|---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认。元素不浮动 |
inherit | 规定应该从父元素继承float属性的值 |
行框和清理
- 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
- 因此，创建浮动框可以使文本围绕图片👇
- 想要阻止行框围绕浮动框，需要使用
clear属性。clear属性的值可以是left，right，both或none，它表示框的哪些边不应该挨着浮动框。 - 为了实现这种效果，在被清理的元素的外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面👇
- 👆它让周围的元素为浮动元素留出空间。
demo
- 假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。
<html>
<head>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="/i/eg_smile.gif" />
<p>你好，我很开心</p>
</div>
</body>
</html>
👇运行结果👇
- 👆很明显。因为浮动元素脱离了文档流，所以包围图片和文本的
div不占据空间。
- 不幸的是，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。👇
<html>
<head>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="news">
<img src="/i/eg_smile.gif" />
<p>你好，我很开心</p>
<div class="clear"></div>
</div>
</body>
</html>
👇运行结果👇
- 👆这样所虽然实现了我们希望的效果，但是需要添加多余的代码。所以我们可以对容器
div进行浮动👇
<html>
<head>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="/i/eg_smile.gif" />
<p>你好，我很开心</p>
</div>
</body>
</html>
👇运行结果👇
- 👆不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。
clear
clear属性规定元素哪一侧不允许其他浮动元素。- 如果声明为左边或右边清除，会使元素的上边框边界刚好在该边上浮动元素的下边距边界之下。
- JavaScript语法👇
object.style.clear="left"
| 值 | 描述 |
|---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧均不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
inherit | 规定应该从父元素继承clear属性的值 |
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
