定位

 

　　position属性

 

　　static：默认值，没有定位

 

　　relative：相对定位

 

　　absolute：绝对定位

 

　　fixed：固定定位

 

　　标准文档流

 

　　标准文档流：是指页面上从上到下，从左到右，网页元素一个挨一个的简单的正常的布局方式。

 

　　一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；

 

　　行内元素是在一行中水平布置，从左到右的排列；span,strong等属于行内元素。

 

　　TitleDocument

 

　　我是块级元素，我单独占一行 我单独占一行 我单独占一行

 

　　我是块级元素，我一行一行的排列，我一行一行的排列，我一行一行的排列

 

　　我的行内元素，我水平的排列，我水平的排，我水平的排，我水平的排列，我水平的排列

 

　　我是行内元素，没有那么霸道，没有那么霸道，没有那么霸道，没有那么霸道，没有那么霸道

 

　　static定位

 

　　position:static

 

　　元素没有定位，以标准流方式显示

 

　　position属性

 

　　第一个盒子

 

　　第二个盒子

 

　　第三个盒子

 

　　@charset "gb2312";

 

　　div {

 

　　width: 300px;

 

　　margin:10px;

 

　　padding:5px;

 

　　font-size:12px;

 

　　line-height:25px;

 

　　}

 

　　#father {

 

　　width: 500px;

 

　　margin: 50px auto;

 

　　border:1px #666 solid;

 

　　padding:10px;

 

　　}

 

　　#first {

 

　　background-color:#FC9;

 

　　border:1px #B55A00 dashed;

 

　　}

 

　　#second {

 

　　background-color:#CCF;

 

　　border:1px #0000A8 dashed;

 

　　}

 

　　#third {

 

　　background-color:#C5DECC;

 

　　border:1px #395E4F dashed;

 

　　}

 

　　相对定位

 

　　relative属性值

 

　　相对自身原来位置进行偏移

 

　　偏移设置：top、left、right、bottom可以用left来描述盒子向右移动；

 

　　可以用right来描述盒子向左的移动；

 

　　可以用top来描述盒子向下的移动；

 

　　可以用bottom来描述盒子的向上的移动；

 

　　如果是负数就是相反的方向。

 

　　相对定位的盒子，不脱离标准流，老家保留位置，其后的元素不能占用其原有位置。

 

　　相对定位的主要用途是作为其内部元素绝对定位时的参照标准，有相对于我之义。