三种定位体系简介

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三种定位体系简介相关的知识,希望对你有一定的参考价值。

( box )布局影响因素之一,便是定位体系。定位体系也是其最为重要的影响因素。

CSS2.1 中,一个框可以根据三种定位体系布局。CSS2.1 中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果。

 

常规流( Normal flow )

常规流,是对 "normal flow" 的直译。

之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流。

在 CSS2.1中,常规流包括块框( block boxes )的块格式化( block formatting ), 行内框( inline boxes )的行内格式化( inline formatting ),块框或行内框的相对定位,以及插入框的定位。

 

浮动( Floats )

浮动,顾名思义,相对于常规流来讲,它漂浮在常规流的上方。

在浮动模型中,一个框( box )首先根据常规流布局,再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。 因为它首先要根据常规布局后才偏移,所以效率较常规流低。

用 ‘float‘ 特性声明浮动,特性值可以是:"none"、"left"、"right"。

绝对定位( Absolute positioning )

在绝对定位模型中,一个框整个地从常规流中脱离(它对后续的兄弟元素没有影响),并根据它的包含块来分配其位置。

 

static

该框是一个常规框,布局根据常规流。‘left‘ 、‘right‘、‘bottom‘ 和 ‘top‘ 属性不适用。

relative

框的位置根据常规流计算(被称为常规流中的位置)。然后框相对于它的常规位置而偏移。如果框 B 是相对定位的,其后框的定位计算并不考虑 B 的偏移。 table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, 和 table-caption 元素的 ‘position:relative‘ 效果没有被定义。

absolute

框的位置(可能还有它的尺寸)是由‘left‘,‘right‘,‘top‘和‘bottom‘特性决定。这些特性指定了框相对于它包含块的偏移量。 绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。另外,尽管绝对定位框有外边距(margin), 它们不会和其它任何外边距发生折叠(Collapsing margins)。

fixed

框位置的计算根据 ‘absolute‘ 模型,不过框要额外地根据一些参考而得到固定。跟绝对定位一样,固定定位元素的外边距不会和任何其他外边距发生折叠。 应用于手持终端、投影设备、屏幕、TTY、电视媒体类型时,框相对于可视窗口固定,滚动时不移动。应用于打印媒介类型时,框被渲染于每一页, 并相对于页框固定,就好象是通过可视窗口查看该页一样(例如,打印预览)。对于其他的媒介类型,表现没有被定义。

总结:

absolute和fixed优先级最高,有它存在时,浮动起不了作用。

Display的值是none

         如果display的值是none,那么position和float不起作用,在这种情况下,元素不产生框,因此浮动和定位无效。

Position的值是absolution或fixed

         如果position的值是absolution或fixed,框就是绝对定位的,float计算后的值应该是none,并且,display会被按照表设置,框的位置将有top、right、bottom和left属性和该框的包含确定。

‘float‘ 的值不是 "none"

如果 ‘float‘ 的值不是 "none",该框浮动并且 ‘display‘ 会被按照转换对应表设置。

元素是根元素

如果元素是根元素,‘display‘ 的值按照转换对应表设置。

 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position的理解</title>
</head>
<style type="text/css">
#box,#box1,#box2{width:300px;border:2px solid black;text-align: center;color:#fff;}
#A,#A1,#A2{ background-color:red;height:50px;}
#B,#B1,#B2{background-color:green;height:50px;}
#C,#C1,#C2{background-color:blue;height:50px;}
#box{
/*默认*/
position:relative;
top:20px;
left:20px;
}
#A{
position: absolute;
top:20px;
left:20px;
width: 100%;
/* z-index: 15;*/
}

#B{
position: absolute;
width: 80%;
float: left;
/*z-index: 15;*/
}

#C{
position: absolute;
width: 100%;

}

#box1{
/*默认*/
position:static;
margin: auto;
display: none;
}
#A1{}
#B1{}
#C1{}

#box2{
/*默认*/
position:static;
float:right;
display: none;
}
#A2{}
#B2{}
#C2{}

</style>
<body>
<div id="box">
<div id="A" >A</div>
<div id="B" >B</div>
<div id="C" >C</div>
</div>

<div id="box1">
<div id="A1" >A1</div>
<div id="B1" >B1</div>
<div id="C1" >C1</div>
</div>

<div id="box2">
<div id="A2" >A2</div>
<div id="B2" >B2</div>
<div id="C2" >C2</div>
</div>
</body>
</html>

以上是关于三种定位体系简介的主要内容,如果未能解决你的问题,请参考以下文章

计算机网络13--网络应用的体系结构

css复习2

定位体系

敏捷个人新体系学习 - 2.定位

定位体系

定位体系之浮动