div定位

原創 tianhuadihuo 2018-09-03 19:09

題外話：

三軍統帥，征戰沙場。運籌帷幄之中，決勝千里之外。好不痛快淋漓！

吾等不列行伍之中，無法感於此等盡興與酣暢。而每日面對程序，能夠暢快的遊弋於各種對象與元素之間，使之誓死聽命於自己，這豈不是與戰場上的酣暢有着異曲同工之妙呢？

既然我們註定成爲不了將軍，那就努力讓我們在自己的地盤上“稱王稱霸”吧！再借用一句廣告語：我的地盤我做主！這也就是這篇文章我這樣命名的用意。

進入正文：

div+css用於網頁佈局似乎已經流行了很久很久了，可固執的我從骨子裏似乎對它就有牴觸情節，一方面對之輕視，一方面每每遇到它又被其折磨的痛苦不堪。痛定思痛，決定對它潛心研究一下，將其玩弄於股掌之間！

網上搜了搜div定位相關的內容，大多是從表面上介紹一些使用上的規律，很少有描述爲什麼如此的文章。於是，便引發了我想寫這樣一篇文章的衝動。

說到頁面元素的定位，就不得不首先提起文檔流的概念。

關於文檔流，我並沒有在網絡或書籍上找到一個確切的定義。在此，我只能說說我個人對其的認識。

所謂文檔流，即爲頁面元素自上而下、從左到右的排列次序，如同線性的流一般。我們在編寫頁面時，也基本上是按照這樣的一個順序來安置各種元素。如果我們沒有對div指定定位方式的話，瀏覽器就會按照其在文檔流中的次序進行顯示。如：

 

以下爲引用的內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>div定位測試</title>
</head>
<body>
    <div id ="divFirst" style ="width:400px; height:50px;background-color:#FF00FF;">這裏是divFirst</div>
    <div id ="divSecond" style ="width:400px; height:50px;background-color:#01DFD7;">這裏是divSecond</div>
    <p><font color="#FF0000">*</font>&nbsp;在普通的文檔流中，div塊級元素是自上而下依次排列的</p>
</body>
</html>

 

上述代碼中，兩div並未採取任何的定位方式，瀏覽器按普通文檔流的方式對其顯示，以下是顯示效果：

玩轉div定位

下面我們就來詳細的說說div定位的關鍵的兩個步驟。

首先，我們要判斷被定位元素是否脫離普通文檔流。是否脫離文檔流將會影響文檔流中其餘元素的定位。

對於脫離了文檔流的元素，其顯示已經不再受普通文檔流的束縛，而文檔流中的其餘元素的定位就如同該元素已經不在頁面上一樣。

而對於未脫離文檔流的元素，其無論偏移到了頁面的何處，實際上佔據的仍然是其原來的位置。文檔流中的其餘元素定位時，也就會相應的留出該元素的位置。

在幾種定位方式中，position:absolute和float是脫離文檔流的，而position:relative不會使被定位的對象脫離普通的文檔流。下面我們來舉例說明：

 

 

以下爲引用的內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>div定位測試2</title>
</head>
<body>
    <div id ="divFirst" style ="width:400px; height:50px;background-color:#FF00FF;">這裏是divFirst</div>
    <div id ="divSecond" style ="width:400px; height:50px;background-color:#01DFD7; position:absolute; top:20px; left:50px;">這裏是divSecond</div>
    <div id ="divThird" style ="width:400px; height:50px;background-color:#FFFF00;">這裏是divThird</div>
</body>
</html>

 

 

 

 

以下爲引用的內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>div定位測試3</title>
</head>
<body>
    <div id ="divFirst" style ="width:400px; height:50px;background-color:#FF00FF;">這裏是divFirst</div>
    <div id ="divSecond" style ="width:400px; height:50px;background-color:#01DFD7; position:relative; top:20px; left:50px;">這裏是divSecond</div>
    <div id ="divThird" style ="width:400px; height:50px;background-color:#FFFF00;">這裏是divThird</div>
</body>
</html>

 

 

以上兩示例代碼中，唯一一處區別就是divSecond一個採用absolute定位，另一個採用relative定位。這就會導致很大的不同，見下圖：

玩轉div定位

divSecond採用absolute定位的效果


玩轉div定位
divSecond採用relative定位的效果


div的定位參數有四個:static(默認),relative,absolute,fixed四個.

static與relative一組

absolute與fixed一組

static是系統默認的div定位方式,relative是在默認定位方式的情況下,進行的偏移,並且默認位置的空間將被佔據,如上圖所示,該空間無法被其它div佔用,通常和top,bottom,left,right等參數配合使用.

absolute是將div放置到整個web頁面的絕對位置上,不影響static和relative的div排列.

fixed是將div放置到整個瀏覽器窗口的絕對位置上,當窗口滑動時,div跟隨滑動.


divSecond採用absolute定位的頁面中，原來位於divSecond下的divThird上移將其的位置佔據；而採用relative定位的頁面中沒有出現這樣的情況。

其次，確定被定位元素偏移的參照物。找準參照物，被定位元素的位置也就明晰了。

由position:absolute定位的元素參照的對象是其最近的已定位（包括position:absolute和position:relative兩種方式）的祖先元素（祖先元素即位於外層，嵌套其的元素），若該祖先元素不存在，則其參照最初的包含塊，如頁面畫布。float和position:relative兩種定位方式參照的是被定位元素在普通文檔流中的原本的位置。

被position:absolute和position:relative定位的元素，其偏移量由top、left、bottom和right確定。float定位指示了其是向右（right）、向左（left），還是同時向左右（both）漂移。以下爲示例：

 

 

以下爲引用的內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>div定位測試2</title>
</head>
<body>
    <div id ="divFirst" style ="width:400px; height:100px;background-color:#FF00FF;">這裏是divFirst</div>
    <div id ="divSecond" style ="width:400px; height:100px;background-color:#01DFD7;">這裏是divSecond</div>
    <div id ="divThird" style ="width:400px; height:100px;background-color:#FFFF00;">這裏是divThird</div>
    <div id ="divFourth" style ="width:400px; height:100px;background-color:#01DF01;">
        <div id ="divFifth" style ="width:160px; height:20px;background-color:#FF8000; top:20px; left:60px; position:absolute;">這裏是divFifth</div>
    </div>
</body>
</html>

 

 

以上代碼中divFifth採用了absolute定位，其運行效果圖爲：

玩轉div定位

很明顯，因divFifth無已定位的祖先元素，其參考物爲頁面畫布。如果divFifth採用relative定位，其顯示效果又是什麼樣呢？見下圖：

玩轉div定位

如此，divFifth的定位參照物便是其原來在普通文檔流中的位置。

在div下的子div定位是相對於父div而言的.

好了，就寫到這吧！至於採用float定位時參照物的選擇，請讀者自己去嘗試吧！

此篇文章中介紹的對div的定位分析，同樣適用於 p 、ul 等塊狀元素。相信你看了這篇文章後，一定會對元素定位有一個全新的認識，進而將其玩弄於股掌之間。 最後附上一張關於定位的總結表格：

玩轉div定位


6.float|浮動對齊

使用float定位一個元素有float:left;float:right;兩種值。這種DIV定位只能在水平座標定位，不能在垂直座標定位。而且讓下面的元素浮動環繞在它的左邊或者右邊,float同樣是在父標籤下的排列。
example: 

  1. #div-1a{  
  2. float:left;  
  3. width:200px;  
  4. }  
  5.  



7.maketwoclumnwithfloat|浮動實現兩列布局



如果讓一個元素float:left;另一個float:right;控制好他們的寬度，就能實現兩列的佈局效果。

example: 


  1. #div-1a{  
  2. float:left;  
  3. width:150px;  
  4. }  
  5. #div-1b{  
  6. float:left;  
  7. width:150px;  
  8. }  



8.clearfloat|清除浮動



如果你不想讓使用了float元素的下面的元素浮動環繞在它的周圍，那麼你就使用DIV定位中的clear,clear有三個值，clear:left;(清除左浮動)，clear:right;(清除右浮動)，clear:both;(清除所有浮動)。

example: 


  1. <dividdivid="div-1a">thisisdiv-1a</div> 
  2. <dividdivid="div-1b">thisisdiv-1b</div> 
  3. <dividdivid="div-1c">thisisdiv-1c</div> 
  4.  
  5. #div-1a{  
  6. float:left;  
  7. width:190px;  
  8. }  
  9. #div-1b{  
  10. float:left;  
  11. width:190px;  
  12. }  
  13. #div-1c{  
  14. clear:both;  
  15. }  












    





發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章