本文共 5198 字，大约阅读时间需要 17 分钟。

4.4CSS定位机制概述

1.定位机制：把各个盒子（也就是页面元素）放在具体的位置。

2.定位机制的分类： （1）文档流flow：默认的一种情况，不需要额外的设置，每种元素在当前的页面上呈现出来的状态。页面元素从左到右，从上到下显示，只是有的元素单独占一行，有的元素排在别的元素的右边。 （2）浮动定位float：改变默认的文档流的情况。脱离文档流，让元素浮动起来。浮动定位采用float属性，属性值为right，向右浮动，属性值为left，向左浮动。 （3）层定位layer：当前的网页的元素像图层一样前后层叠在一起，有一个叠加的效果，摆在上面的层可以遮掉下面的层。层定位采用position属性。

4.5 文档流定位方式flow

1.文档流定位方式，所有的元素从左到右，从上到下依次排列。对于每个元素来说，根据自己的不同分类，有自己的特征，有的元素独占一行，有的元素会跟其他元素排列在一行。那么元素的分类有三种类型

（1）block：独占一行，元素的height、width、margin、padding等属性都可以设定。常见的block类型的元素：div、p、h1…h6、ol、ul、table、form等。常见的inline类型的元素：a、span等。 （2）inline：不单独占一行，宽度够用的情况，所有inline类型的元素都在一行显示；width、height不可以设置；width就是它包含的文字或图片的宽度，不可改变。

inline元素之间有一个间距的问题

两个inline元素水平排列开的时候默认带有间隙，通常情况下最简单的方式就是将inline类型的元素转换成block类型或其它类型的元素来进行的显示。这也是为什么我们在做导航条的时候，尽管a标签元素是可以默认水平排列的，但是我们也不用这种方式，而是在每个a标签外面用p标签或者ul标签来进行这种超链接的设置。默认的inline类型的元素有间隙问题，处理起来比较麻烦。

（3）inline-block：就是同时具备inline元素、block元素的特点。不单独占用一行，元素的height、width、margin、padding等属性都可以设定。可以把这种元素看成是可以水平排列的block类型的元素。常见的inline-block类型的元素：img等。

2.可以通过display属性来对元素的类型进行转换 （1）将元素显示为block元素：

a{
   		display: block;	}

元素a为inline类型的元素，通过上面的代码就可以把元素a变为block类型的元素，从而使a元素具有块状元素的特点，就可以设置它的height、width等等。

（2）将元素显示为inline元素：

div{
   		display: inline;	}

（3）将元素显示为inline-block元素：

div{
   		display: inline-block;	}

3.案例

	
   			
   
		
    链接		
    链接		
    链接	
   

实现效果

默认：

鼠标悬停到超链接内：

4.6 浮动定位方式float

使用float属性来进行浮动定位；使用clear属性可以清楚这种浮动

1.float属性（设定浮动）

1. float属性的三个取值
   （1）left左浮动
   （2）right右浮动
   （3）none不浮动
   下面是一个向左浮动的例子
   
2. float属性的两个用处
   （1）在图文混排的时候，如果你希望图片位于文字的左侧或者右侧，那就把图片对的float属性设为left或者right；
   （2）在做多列盒子布局的情况，可以根据需求让盒子向左或向右浮动。
3. float属性的特点
   三个盒子，默认情况向下不浮动，体现了block类型元素的特点，每个独占一行
   
   （1）box1向右浮动的情况，box1向右浮动，他就脱离了文档流，所以它原来的位置就会被box2占据，box3也向上移动；
   
   （2）三个盒子都向左浮动
   宽度也够的情况，div标签形成的三个盒子就可以水平排列；
   
   当宽度不够的情况，box3会下降到第二行排列
   
   当宽度不够的情况，要特别注意下面的排列方式
   

2.clear属性（清除浮动）

1. clear属性的取值
   （1）both：清除当前元素两侧的浮动
   （2）left或right：只能清除一侧，清除的意思不是清除浮动，而是这个元素的左侧或右侧没有浮动元素。
2. 清除浮动的应用：
   （1）当我们把两个盒子都设为向右浮动时，就会出现下面的效果
   
   但是当我们想要下面的效果的时候，就要用clear属性，设置它的值为right，那么它的右侧就没有浮动元素了，它自然就到了下面了。注意，设置的是左侧的盒子的clear属性，因为它的右侧有浮动元素。
   
   （2）当前的区域分为左右两栏，左侧的main比较高，右侧的sidebar比较低，第三栏的footer不管是否浮动，它都会排列占据这个浮动元素的一个空位。但是我们并并不是想让footer为那个位置，而是想让他位于main的下方显示，这就要用到clear属性；
   
   当把footer的clear属性设置为both，footer的两侧就不允许出现向左浮动或者向右浮动的元素，footer就会单独占一行。
   

4.7层定位方式layer

网页上的元素层叠在另外的元素上面，有一个叠加或者覆盖的效果

层定位方式主要通过position属性来设定当前这一层可以相对于那一次进行定位，position属性的不同的属性值的参照物是不同的。

position属性：

position的取值有fixed：固定定位；relative：相对定位；absolute：绝对定位。

设置了position属性，就知道了参照物，就可以设定下面的属性： top属性：设置当前盒子距离它的参照物的上边界的距离；以及left、righ和bottom属性； z-index：设置前后层的层叠关系，取值大的这一层会在取值小的一层的上面；如果我们想把某一层当做背景，就可以把它的z-index值设置的很小，可以设置为负，如果我们想让某一层在最上面显示，就把它的z-index值设置的相对大一点。 设置完这些属性就知道位置在哪了。

position属性的取值

（1）static：默认值。没有定位，元素出现在正常的文档流中，也就不是层定位方式，top、bottom、left、right、z-index无效。以下三种都是层定位的方式。

（2）fixed：固定定位。相对于浏览器窗口进行定位，top、bottom、left、right、z-index有效。 （3）relative：相对定位。相对于其直接父元素进行定位，top、bottom、left、right、z-index有效。 （4）absolute：绝对定位。相对于static定位以外的第一个父元素进行定位（也就是向上找有定位属性的父元素，其位置就相对于找到的第一个有定位属性的父元素，若没有找到有定位属性的父元素，则相对body），top、bottom、left、right、z-index有 body效。

固定定位：position：fix

可以看见，红色边框的盒子，不会随着滚动条的滑动而移动，因为他是固定定位，它的值都是相对于浏览器窗口。

当前红色边框的盒子距离浏览器左侧的距离为100px，上方的距离为50px，左上角的坐标原点是不会变的，设置了值之后，它距离坐标原点的距离就固定了。

相对定位vs绝对定位

第一个区别：

相对定位：position：relative

定位为relative的元素脱离正常的文档流，但其在文档流中的原位置依然存在。 初始状态下两个盒子的位置是下面那样 用下面的代码把上面的盒子设置为相对定位

#relative-box{
   			width: 300px;			height: 200px;			background-color: #6cf;						position: relative;			top: 60px;			left: 25px;		}

设置为相对定位之后的效果

可以看见relative-box脱离的文档流，位置由top和left决定。但是由于其在文档流中的原位置依然存在，所以位于它下面的static-box没有占据它的位置。 绝对定位：position：absolute。 定位为absolute的元素脱离正常的文档流，但其在文档流中的原位置不再存在。 初始状态下两个盒子的位置是依然下面那样 用下面的代码把上面的盒子设置为绝对定位

#relative-box{
   			width: 300px;			height: 200px;			background-color: #6cf;						position: absolute;			top: 60px;			left: 25px;		}

设置为绝对定位之后的效果

可以看到，relative-box脱离的文档流，位置由top和left决定，它的位置上和左分别是65px和25px，由于它原来在文档流中的原位置不再存在，所以它下面的static-box会向上移动，占据它原有的位置。

第二个区别：

relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式。

HTML代码，有三个嵌套着的盒子，

   
    absolute-box		
    
			
     
      relative-box
     
		
    
	
   

CSS代码

*{
   			margin: 0;			padding: 0;		}		body{
   			background-color: #fff;		}		#absolute-box{
   			width: 500px;			height: 400px;			margin: 20px;			background-color: #5cc;		}		#static-box{
   			width: 300px;			height: 200px;			margin: 30px;			background-color: #acc;		}		#relative-box{
   			width: 100px;			height: 60px;			margin:20px;			background-color: #fcc;		}

当三个盒子都没有定位属性的时候，是下面的布局

当最外层的盒子设置了absolute定位的布局，为了便于观看，给了body一个背景颜色，最外面的深蓝色是body的颜色，不是一个盒子，可以看见最外层的盒子距离浏览器的上和左分别有20px的距离。

#absolute-box{
   			width: 500px;			height: 400px;			margin: 20px;			background-color: #5cc;			position: absolute;			top: 20px;			left: 20px;		}

下面分两种情况来看： （1）当最内层的盒子设置了relative属性

#relative-box{
   			width: 100px;			height: 60px;			margin:20px;			background-color: #fcc;			position: relative;			top: 20px;			left: 20px;		}

可以看见最内侧的盒子距离他的之间父元素（中间的盒子）向上和向左分别有20px的距离。这就是relative属性，设置为它的元素其定位是相对于其直接父元素。 （2）当最内层的盒子设置了absolute属性 可以看见最内层的盒子并不是相对于他的直接父元素的上和左有一个边距，而是相对于最外层的盒子的上和左有一个20px的边距。因为它的直接父元素没有定位属性（就是static属性的定位），所以它会继续向上找有定位属性的元素，找到了最外层有absolute定位属性的元素，所以就相对于最外层的盒子来定位。这就是absolute属性，设置为它的元素其定位总是相对于除static之外的第一个父元素，也就是总是相对于有定位属性的元素，当没有找见有定位属性的元素是，它会相对于body来定位。

relative和absolute结合使用

通常将外层的父元素设定为相对定位，将它内层的子元素设定为绝对定位，这样当父元素移动的时候，因为子元素是相对父元素进行定位的，所以他们两个可以一起移动。 这样当图片移动的时候，下面的文字也会跟着移动。

转载地址：http://ipqzi.baihongyu.com/