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就沒有縫隙了，想要有文字，在子元素中設置）
}