CSS中的定位机制

CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)

  普通文档流

就是CSS中默认的文本文档 

普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin值计算得到,行内元素在一行中水平布置

浮动

  1. 所有主流浏览器都支持 float 属性,给元素设置 float 样式 ,元素会脱离文档流 ,浮动的元素可以左右移动,直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘。
  2. CSS 中,任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素,行内元素和行内块元素会围绕浮动框排列,块元素会被覆盖。
  3. 在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
  4. 他可取三个值:
eft 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。

案列:

div{
float: left; /* 左浮动 */
}

定位

  1. 所有主流浏览器都支持 position 属性,给元素设置position属性可以规定元素的定位类型。
  2. 任何元素都可以定位。除静态定位以外,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  3. 他可取四个值:
absolute

绝对定位,相对于 static 定位以外的第一个父元素进行定位。 (子绝父相 :绝对定位相对于父元素设置了除静态定位以外而定位,如果父级没有设置定位他会一层层向上寻找有定位的祖级 直到body元素)

fixed

绝对定位,相对于浏览器窗口进行定位。

relative

相对定位,相对定位看作普通流的一部分,移动后的元素仍占据原来的位置,移动元素会导致他覆盖其他的框。

static 默认值。没有定位。

子绝父相    案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
position: relative; /*相对定位*/
width: 400px;
height: 400px;
background: yellow;
margin: 200px auto;
}
.son {
position: absolute; /*绝对定位*/
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background: skyblue;
}
</style>
</head>
<body>
<div class="father"> 父盒子
<div class="son">子盒子</div>
</div>
</body>
</html>

 

    

上一篇:[转]总结一下CSS中的定位 Position 属性


下一篇:PHP索引数组+unset使用不当导致的问题