CSS之定位

标签：

一，
正常文档流：指的是HTML文档在进行内容布局时所遵循的从左到右，从上到下的表现方式。HTML中的大多数元素都处在正常的文档流中，而一个元素要脱离正常流的唯一途径就是浮动或定位。
二，定位的常见几种形式；
1，CSS有三种基本的定位机制：普通流，浮动和绝对定位；
a,普通流demo：
<!-- 普通流 -->
<h1>1.普通流</h1>
<div style="border:1px solid #0e0; width:200px">
<div style="height:100px; width:100px; background-color:red"></div>
<div style="height:100px; width:100px; background-color:blue"></div>
<div style="height:100px; width:100px; background-color:green"></div>
</div>
b,相对定位demo：
<!-- 相对定位 -->
<h1>2.相对定位</h1>
<div style="border:1px solid #0e0; width:200px">
<div style="height:100px; width:100px; background-color:red"></div>
<div style="height:100px; width:100px; background-color:blue; position:relative;top:0px; left:100px"></div>
<div style="height:100px; width:100px; background-color:green"></div>
</div>
总结：1，上面例子可以看出，对蓝色div进行相对定位，分别右移，下移20px后绿色div位置并没有相应变化，而是在原位置，蓝色div遮挡住了部分绿色div。
c,绝对定位demo：
<!-- 绝对定位 -->
<h1>绝对定位</h1>
<div style="border:1px solid #0e0; width:200px"> （＊＊总结2的解释＊＊加上：position:relative）
<div style="height:100px; width:100px; background-color:red"></div>
<div style="height:100px; width:100px; background-color:blue; position:absolute;top:0px; left:100px"></div>
<div style="height:100px; width:100px; background-color:green"></div>
</div>
总结：
1，相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间。

2，绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。
d,固定定位demo：
<h1>4.固定定位</h1>
<div style="border: solid 1px #0e0; width:200px;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: blue; position:fixed; bottom:50px; left:50px;">
</div>
<div style="height: 100px; width: 100px; background-color: green;">
</div>
</div>
e,浮动定位demo：
1，基本知识：
浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
1，）不浮动：
<!-- 浮动之不浮动 -->
<h1>5.浮动之不浮动</h1>
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; ">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
<!-- 右浮动 -->
<h1>6.右浮动</h1>
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:right;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; ">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
<!-- 左浮动 -->
<h1>7.左浮动</h1>
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
<!-- 整体左浮动 -->
<h1>8.整体左浮动</h1>
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
<br><br><br><br><br><br>
<!-- 宽度不够时 -->
<h1>9.宽度不够时</h1>
<div style="border: solid 5px #0e0; width:250px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 高度不够时 -->
<h1>10.高度不够时</h1>
<div style="border: solid 5px #0e0; width:250px;">
<div style="height: 120px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
f.行框清理demo：
1. 理解：前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。
2.代码：
<!-- 行框和清理 -->
<h1>11.行框和清理:不浮动时</h1>
<div style="border: solid 5px #0e0; width: 250px;">
<div style="height: 50px; width: 50px; background-color: Red;"></div>
<div style="height: 100px; width: 100px; background-color: Green;">
11111111111
11111111111
</div>
</div>
<h1>浮动时</h1>
<div style="border: solid 5px #0e0; width: 250px;">
<div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
<div style="height: 100px; width: 100px; background-color: Green;">
11111111111
11111111111
</div>
</div>
三，display:inline-block；
1.由于div是块级元素，所以框会以纵向形式排列。在实际操作中往往需要将框横向排列。所以可以使用：display:inlin-block;
2.代码：
1）：
<div class="boxBg">
<div class="box1">
框框1
</div>
<div class="box2">
框框2
</div>
<div class="box3">
框框3
</div>
</div>
2）：
<style type="text/css">
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline-block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}
</style>

3.总结：
1.至于中间的缝隙，追溯到本质原因是元素之间的空白符引起的，所以在父元素设置fone-size的大小，可以调节空白缝隙的大小。
2.代码：
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px;（文字的大小影响缝隙，为0就没有缝隙了，想要有文字，在子元素中设置）
}

CSS之定位

标签：

原文地址：http://www.cnblogs.com/madman-dong/p/5656668.html