CSS 中定位方式有几种,说明他们的意义

html-css087

CSS 中定位方式有几种,说明他们的意义,第1张

大概是四种:

position: fixed(固定)

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

position: absolute(绝对)

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框

position: relative(相对)

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

position: static(静态)

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中

css常用的定位方式有五种:

1、static定位(普通流定位) -------------- 默认定位

2、float定位(浮动定位) 例:float:left

有两个取值:left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方,效果上看是遮挡住了没有浮动的元素,有float样式规则的元素是脱离文档流的,它的父元素的高度并不能有它撑开。

如果父元素的宽度太窄,那么其他浮动元素会向下移动,直到有足够的空间(左图所示);如果浮动元素的高度不同,那么其他浮动元素向下移动时,就有可能会出现卡住的情况(下图所示)

注意:浮动元素的外边缘不会超过父元素的内边缘;浮动元素不会上下浮动;浮动元素不会互相重叠,会像行内块元素一样排列。

如果想要既设置浮动,又使父元素的高度被浮动元素撑开,即清除子元素浮动对父元素带来的高度的影响,有四种方法可以实现:

假设HTML代码部分为:

<div class="parent">这是父元素

<div style="float:left">这是子元素</div>

</div>

1) 为父元素设置固定高度 -------------缺点:不知道具体高度没办法设置

CSS代码部分:

.parent{

//...

height:xxx//某个固定值

}

2) 在父元素内,在浮动元素的下方多写一行代码:<div style="clear:both"></div>------------- 缺点:增加代码冗余

HTML代码部分:

<div class="parent">这是父元素

<div style="float:left">这是子元素</div>

<div style="clear:both"></div>

</div>

3) 为父元素设置css规则:overflow:hidden ------------- 缺点:有时候不希望超出部分隐藏

.parent{

// ...

overflow:hidden //某个固定值

}

4) 内容生成 ------------- 最优的方法,推荐

CSS代码部分:

.parent:after{

content:''

display:'block'

clear:both

}

3、relative定位(相对定位) position:relative

相对本元素的左上角进行定位,top,left,bottom,right都可以有值。虽然经过定位后,位置可能会移动,但是本元素并没有脱离文档流,还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素,或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。

相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位,本元素需要设置position为relative。

4、absolute定位(绝对定位) position:absolute

相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位,如果在祖代元素中没有有relative定位的,就默认相对于body进行定位。

5、fixed定位(固定定位)position:fixed

相对于窗口的位置,而且不受其他网页内元素影响,永远处于浏览器窗口的相对位置。

绝对定位是脱离文档流的,与浮动定位是一样的效果,会压在非定位元素的上方。可以设置z-index属性。

注意:当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index,浮动元素是压在绝对定位元素上的,即离用户的视线更近。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

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

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。