[网页基础]DIV+CSS学习笔记(三)盒子的定位与浮动
DIV+CSS学习笔记(三)
一、盒子的浮动
从这个例子开始学习：
<style type="text/css">
body{margin:50px;font-family:Arial; font-size:12px; }
.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}
.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}
.father p{border:1px dashed #111111;background-color:#ff90ba;}
.son1{/* 这里设置son1的浮动方式*/}
.son2{/*这里设置son2的浮动方式*/}
.son3{/*这里设置son3的浮动方式*/}
</style>
<body>
<div class="father">
<div class="son1">盒子-1</div>
<div class="son2">盒子-2</div>
<div class="son3">盒子-3</div>
<p>这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字. 这里是浮动框外围的文字.</p>
</div>
</body>
一）设置第1个浮动的div
.son1{float:left ;height:10px;}/*盒子1浮动，且高度稍微缩小以便看出盒子2的状态*/
看看效果，如图：
说明：盒子2占据原来盒子1的位置，此时盒子1的宽度不再伸展，而是能容下最小宽度。盒子2的左边在原来盒子1的位置，因为此时盒子1己经脱离标准流，标准流中的盒子2会顶到原来盒子1的位置，而文字会围绕着盒子1排列。
二）设置第二个浮动的div
.son2{float:left;height:8px;}
说明：盒子3顶到原来盒子1的位置，但字符围绕着盒子1和盒子2排列。
三）设置第3个浮动的div
.son3{float:left;height:5px;}
说明：盒子1-3都浮动了，就象不存在了，最后的文字盒子占据第一个位置，但量，文字会围绕浮动的盒子排列。
四）改变浮动方向（将盒子3改为向右浮动）
.son3{float:right;height:5px;}
说明：盒子3向左浮动后，文字被挤在盒子2和3之间。
挤小浏览器窗口时如图：
再挤小浏览器窗口时如图：
挤到不能再小时，如图：
注意：并不一定都是盒子3被挤到下边，被挤到下边的盒子是越写在后边的盒子，越最先被挤到下边。
五）全部都向左浮动时：
当盒子1比较高时，缩小浏览器，谁会被挤到什么位置呢？挤到盒子1的下边还是盒子2的下边呢？这个很有趣：
.son1{float:left ;height:30px;}
.son2{float:left;height:8px;}
.son3{float:left;height:5px;}
<div class="father">
<div class="son1">盒子-1<br/>盒-1a</div>
<div class="son2">盒子-2</div>
<div class="son3">盒子-3</div>
<p>…… </p>
</div>
说明：盒子3被挤到下一行，并向左移动，到了这个拐角的地方就会被卡住，而停留在盒子2的下边。
六）使用clear属性清除浮动的影响
clear 属性可以设置为left,right,或者both;特别注意：对clear属性的设置要放到文字所在的盒子里，例如一个p段落的CSS设置中，而不要放到对浮动盒子的设置里面。经常有人误以为在对某个盒子设置了float属性后，要消除它对外面的文字的影响，就要在它的CSS样式中增加一条clear,其实是没有用的。
.father p{border:1px dashed #111111;background-color:#ff90ba;clear:left;}
说明：这是清除左边，因为左边比较高，没看出右边的影响，意思是如果右边很高，清除左边，右边也可能会盖住文字的。
七）扩展盒子的高度
如果将文字所在的段落删除，这里在父div里面只有3个浮动的盒子，它们都不在标准流中，这时观察浏览器的效果如图：
父div缩成一条，是由padding和border构成的，也就是说一个div的范围是由它里面的标准流内容决定的，与里面的浮动内容无关，如果要使父div的范围包含这3个浮动盒子，有一个不算很理想的办法：
.father .clear{margin:0;padding:0;border:0;clear:both;}
<body>
<div class="father">
<div class="son1">盒子-1<br/>盒子-1a</div>
<div class="son2">盒子-2</div>
<div class="son3">盒子-3</div>
<div class ="clear "></div>
</div>
</body>
二、盒子的定位
一）static静态定位
默认的就是静态定位，表示块在原来应该在的位置上，即该值没有任何移动的效果。下边以这个静态例子作为试验讲解：
CSS代码如下：
<style type="text/css">
body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
</style>
BODY代码如下：
<body>
<div id="father">
<div id="block1">Box-1</div>
</div>
</body>
二）相对定位position:relative;
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相对定位 */
left:30px;
top:30px;
}
说明：这里不是左边30，上边30像素，而是相对原来的位置（或应该在的位置），左边加30，上边加30像素的移动。还要记住：相对定位的盒子仍在标准流中，它对父块没有任何影响。
详细的比较，可以多设置几个子块来进行实验，总之相对偏移后，其它的子块会“以为”它还在原来的位置。
对于相对定位，就是以盒子本身在标准流中或者浮动时原本的位置作为偏移基准的。
三）绝对定位position:absolute;
以下边这个例子作为分析对象：
body{
margin:20px;
font-family:Arial;
font-size:12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
#block2{
}
<body>
<div id="father">
<div >Box-1</div>
<div id="block2">Box-2</div>
<div >Box-3</div>
</div>
1、使用绝对定位测试
#block2{
position:absolute;
top:0px;
right:0px;}
说明盒子3紧贴盒子1，仿佛盒子2不存在一样，盒子2脱离标准流。绝对定位是以浏览器窗口为基准来定位的。
2、改一下代码，为父div增加一个相对定位：
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
position:relative; /*相对定位*/
}
这时，父div是相对定位，盒子2就以父窗口为基准定位了。
四）固定定位fixed
固定定位跟绝对定位相似，区别在于定位的基准不是祖先元素，而是浏览器窗口。
三、z-index空间位置
想象页面为x-y轴，垂直于面面的方向为z轴，z-index整数值的大小决定大的显示在前。
四、盒子的display属性
这个属性很重要，将在很多地方发挥巨大的作用：
例：
<body>
<div >Box-1</div>
<div >Box-2</div>
<div >Box-3</div>
<span >Box-4</span>
<span >Box-5</span>
<span >Box-6</span>
<div >Box-7</div>
<span >Box-8</span>
</body>
原图如上，没有什么特殊效果，块级元素和行内元素，就应该是上边的效果，下边来做一个实验：
<body>
<div style="display:inline">Box-1</div>
<div style="display:inline">Box-2</div>
<div style="display:inline">Box-3</div>
<span style="display:block">Box-4</span>
<span style="display:block">Box-5</span>
<span style="display:block">Box-6</span>
<div style="display:none">Box-7</div>
<span style="display:none">Box-8</span>
</body>
显示的效果如下：
分析一下：
原来应该是块级元素的div变成了行内元素，原来是行内元素的span变成了块级元素，设置为none的两个盒子消失了。
可见：display属性可以将某个标记本来的元素类型改变或隐藏，呵呵，这个可以增加很大很大的灵活性。
