標籤：style blog http color io os ar java strong
css定位(Positioning)
所謂定位，即允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。
css提供了三種基本的定位機制：普通流、浮動和絕對位置。
position文法：
position : static absolute relative
普通流(static):
也有叫做文檔流的，即元素按照其在 HTML 中的位置順序決定排布的過程。並且這種過程遵循標準的描述。
相對定位(relative):
元素框位移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。(官方定義)
簡單來說，就是元素框以普通流中元素框原有的位置的左上點為基準，以設定的數值為位移量來定位。而不影響其在文檔流中的原有位置，所以有時候會覆蓋了其他的元素框。
絕對位置(absolute):
元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。(官方定義)
簡單來說，元素框在普通流的空間被刪除，然後該元素框以其最近的已定位祖先元素左上點為基準，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊的左上點為基準，以設定的數值為位移量來定位。
設定了絕對位置的元素框在普通流中的空間位置被關閉，所以其在普通流中的後一個元素框會向上補齊，從而定位的元素框也會覆蓋其他的元素框。
總結一下：相對定位是“相對於”元素在文檔中的初始位置，而絕對位置是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。
這樣放一起看要好理解一些。
浮動(float)
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
其就像絕對位置一樣，元素框根據設定往左或右浮動，直到碰到邊框為止，而浮動的元素框從普通流中刪除，其空間被其後的元素框補上。
畫圖太麻煩，直接上代碼：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>CSS Layout</title> 5 <script type="text/javascript" src="a.js"></script> 6 <style> 7 #box { 8 border: 1px solid green; 9 width: 300px;10 height: 300px;11 }12 #box1 {13 border: 1px solid;14 background-color: yellow;15 width: 70px;16 height:70px;17 }18 #box2 {19 border: 1px solid;20 background-color: red;21 width: 70px;22 height:70px;23 }24 #box3 {25 border: 1px solid;26 background-color: green;27 width: 70px;28 height:70px;29 }30 </style>31 </head>32 <body>33 <div id=‘box‘>34 <div id=‘box1‘>框1</div>35 <div id=‘box2‘>框2</div>36 <div id=‘box3‘>框3</div>37 </div>38 </body>39 </html>
效果：
然後將12至16行代碼加上float屬性：
1 #box1 {2 border: 1px solid;3 background-color: yellow;4 width: 70px;5 height: 70px;6 float: right;7 }
效果：
我們看到框1浮動到了父框體的最右，框2和框3則往上浮填充了原本框1的空間。
如果把right換成left。
float:left;
效果：
按理說框1左浮動，然後應該是框2被框1蓋住了，可是這麼看到框2和框3字樣重疊在一起了？
其實，用調試器查看一下：
box2確實是被框1給覆蓋了，原先的想法是正確的。
把框2也往左浮動，效果：
這樣就很明顯了，綠色的框3不見了，框1框2順序靠左，框3則被框1給覆蓋了。
那框3內的字型怎麼沒有靠上呢？
其實，3個元素框中的文字為文字流，而文字流是不會隨著框體流的上浮而上浮的，所以產生了這樣的狀況。
如果3個框都左浮動，則
但是如果父框體寬度不夠，比如box的寬度設為180px，則：
但如果框1的高度要比其他的高，比如框1的高度為100px，則：
看到框3被框1卡住了，是不是很有意思！
現在我們來看看文本和圖片的浮動處理效果：
代碼：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>CSS Layout</title> 5 <script type="text/javascript" src="a.js"></script> 6 <style> 7 .box { 8 border: 1px solid green; 9 width: 300px;10 height: 300px;11 }12 .img {13 width: 80px;14 height: 80px;15 }16 17 </style>18 </head>19 <body>20 <div class=‘box‘>21 <img class=‘img‘ src=‘image/1.png‘ />22 <p>聖誕節傻到家哦啊是基地哦就我 i 的端午節啊基地哦哇幾滴娃家大奧 i 基地我覺得拍低洼激動 i 家啊我 i 的驕傲 i 覺得皮膚和哦互粉哦</p>23 </div>24 </body>25 </html>
這裡沒有添加任何浮動效果：
如果圖片添加了浮動屬性：
1 .img {2 width: 80px;3 height: 80px;4 float: left;5 }
效果：
如果想要阻止文字環繞圖片，給圖片留出空間，我們可以這麼做，給下面的文字流添加浮動效果。
我們給父框體加一個背景顏色。
1 .box { 2 border: 1px solid green; 3 width: 300px; 4 height: 300px; 5 background-color: yellow; 6 } 7 .img { 8 width: 80px; 9 height: 80px;10 float: left;11 }12 p {13 float: left;14 }
效果：
其實，這裡有一個問題，因為我們給box父框體給定義了高度，如果沒有定義高度，則：
我們發現，父框體的高度變為了0，以下的圖片和文字由於浮動而脫離了文字資料流，從而不佔父框體的空間，因而父框體高度為0。該如何解決這個問題呢？
這就需要用到屬性clear了。
代碼如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>CSS Layout</title> 5 <script type="text/javascript" src="a.js"></script> 6 <style> 7 .box { 8 border: 1px solid green; 9 width: 300px;10 background-color: yellow;11 }12 .img {13 width: 80px;14 height: 80px;15 float: left;16 }17 p {18 float: left;19 }20 .clear {21 clear: both;22 }23 24 </style>25 </head>26 <body>27 <div class=‘box‘>28 <img class=‘img‘ src=‘image/1.png‘ />29 <p>聖誕節傻到家哦啊是基地哦就我 i 的端午節啊基地哦哇幾滴娃家大奧 i 基地我覺得拍低洼激動 i 家啊我 i 的驕傲 i 覺得皮膚和哦互粉哦</p>30 <div class="clear"></div>31 </div>32 </body>33 </html>
效果：
這樣就解決了我們的問題。
當然還有一個辦法，就是把整個box浮動，這樣也可以達到clear的效果，不過這樣下一個元素會受到這個浮動元素的影響。所以很多時候還是要用clear屬性來實現這樣的目的。
這裡有一個小實驗：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>CSS Layout</title> <script type="text/javascript" src="a.js"></script> <style> #box { border: 1px solid green; width: 300px; height: 300px; } #box1 { border: 1px solid; background-color: yellow; width: 70px; height:70px; float:left; } #box2 { border: 1px solid; background-color: red; width: 70px; height:70px; float:left; } #box3 { border: 1px solid; background-color: green; width: 70px; height:70px; float:left; } div { clear: both; } </style></head><body> <div id=‘box‘> <div id=‘box1‘>框1</div> <div id=‘box2‘>框2</div> <div id=‘box3‘>框3</div> </div></body></html>
依然是開始的3個框，均向左浮動，不過現在往裡面添加了一個clear屬性，結果：
【Css】Layout布局(二)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
