陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第十三講：盒子的定位例項

zhenbaobe發表於2015-07-20
遊戲開發

陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第十三講：盒子的定位例項


摘要：通過前節《第十二講：盒子的定位方式》學習了網站建設中的DIV+CSS中盒子模型,介紹利用CSS進行網頁佈局定位的四種方式和三種定位機制。本節對4種不同型別的定位static、relative、absolute、fixed定位機制進行深入探討。以方便貴陽網站建設人員在網站建設中加深對PHP教程的瞭解。


什麼是DIV+SCC的盒子模型？
    在網站建設中關於內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式這些屬性。一個盒子模型由內至外由content（內容），padding（填充），border(邊框)，margin(邊界)四部分組成，如圖所示。[瞭解更多]深入理解盒子模型   

1、CSS position屬性
    通過使用Position屬性，可以選擇4種不同型別的定位static、relative、absolute、fixed。這四種不同的定位方式同時影響了其不同的定位機制。
  CSS定位(Positioning)屬性允許你對元素進行定位.position 屬性值：
 
    static (預設值)：元素框正常生成。塊級元素生成一個矩形框，作為文件流/標準流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。 
    relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留,從這一角度看，好像該元素仍然在文件流/標準流中一樣。 
    absolute：元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。  
    fixed：元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。 


常見的定位有四種：
1. static 定位 (預設值)
2. relative 相對定位
3. absolute 絕對定位
4. fixed 固定定位.


(1)相對定位


軟體設計,貴陽網站建設


   這裡我們看出，所謂相對定位是指相對該元素應當顯示的左上角重新定位，雖然它脫離的標準流，但是它的空間，不能被佔用。


（2）絕對定位



    從上圖看，所謂絕對定位是指，對該元素最近的那個脫離了標準流的元素定位，如果沒有父元素(或者有父元素，但是父元素沒有脫離標準流)，則相對body左上角定位。



程式碼:
Html:
<body>
<div class="div1">
內容1
</div>


<div class="div1">
內容3
</div>
<div class="div1">
內容4
</div>


<div class="div2">
<div id="spe" class="div1">
內容2
</div>
</div>
</body>


Css檔案:
.div2{
 position:relative;
 left:100px;
 top:100px;
 width:200px;
 height:150px;
 background:pink;
 float:left;
}


（3） Fixed定位


    所謂fixed定位就是不管怎樣，總是以視窗的左上角定位。
left top 屬性 對 static 沒有效果 ，static 定位是靠 margin-left margin-top 來移動位置的.


（4）幾種定位方式的混合使用


    1）父元素和子元素使用不同定位方式的組合
    在以上文章談到的定位方式中,除了position屬性為fixed的元素定位是相對於瀏覽器定位，其它的定位方式都是相對於其父元素或者祖先元素(absolute)進行定位。本節將對父元素對子元素的定位影響進行簡單闡述。以下幾種方式都是子元素可以參照父元素進行定位的情況。
  a 父元素position屬性為預設值(statie)
    此時不管父元素是在普通文件流中還是處在浮動狀態(float屬性不為none)下，其子元素的position屬性可以是static，relative，或者是浮動元素。
  b 父元素position屬性為relative
    此時不管父元素是在普通文件流中還是處在浮動狀態下，其子元素的position屬性可以是Static,relative,absolute或者是浮動元素。
  c 父元素position屬性為或absohite或fixed
    此時父元素是絕對定位，其float屬性是無效的。但子元素的position屬性可以是static,relative,absolute或者是浮動元素。
    2）同級元素間的定位
    同級元素間使用不同的定位方式時，可以使用left,top,right,bottom,margin等屬性來調整他們之間的位置,如果有重疊的元素,z-index可以調整重疊元素的重疊層次,但該屬性僅能在已定位的元素上奏效,即當元素的position屬性為、tatic時z-index屬性是無效的。


（5） z-index
    用於設定物件(div) 顯示時候，層疊的屬性, z-index值越小，則越在下層顯示!


    當父層不設定高度，而子層進行了float，因為父層是標準流，會不認識子層的存在，所以高度會自動變成0.解決辦法一是在父層裡面，最後一個子層後面加一個塊狀元素，然後給這個塊狀元素清除浮動；二是給父層進行浮動，讓它認識子層，高度會自動撐開。


（6）佈局中注意的問題
     1)頁面元素居中設定。 可以利用margin屬性進行頁面元素水平居中的設定。將左右邊界設定為自動即可實現居中顯示，
如：margin: 0px auto; /*表示上下邊界為0，左右邊界自動*/
margin: 0px auto 10px; /*表示上邊界為0，左右邊界自動,下邊界為10px*/
     2) 使用line-height 進行頁面元素垂直居中的設定。line-height 為行高屬性，當行高與元素本身高相同時，行內元素是垂直居中的。如：
    #menu{line-height: 50px;height:50px;} /* 行高和標籤高同為50px*/。但是這種居中的方式在表單的文字框中是沒有效果的，還有一個辦法就是定義上下補白，即padding 屬性值就可以實現想要的效果了。
     3)在進行樣式設計的時候一定要注意子容器寬度和及高度和不能超過父容器的寬度和高度。否則，容器會跑出來，使得頁面達不到理想狀態。建議在進行總容器設計的時候不要用絕對值的方式來定義其寬度和高度。另外，容器的邊界線以及邊距等在設計的時候一定要把其相應的寬度或高度考慮進去。
（7）DIV+CSS佈局的優勢
     通過上面的分析，我們可以得出DIV+CSS佈局有如下優點：
    ① DIV+CSS佈局使網頁內容與表現分離，從而易於網頁的改版和維護。
    ② CSS使網頁程式碼清晰簡潔，從而可以使網頁載入速度更快，及節省頻寬。
    ③ CSS使站點可以更好地被搜過引擎找到。
    ④ 易於保持視覺的一致和網站風格的一致。
    因而在當前越來越多的人採用DIV+CSS佈局網頁，DIV+CSS佈局應是當前網頁設計與製作課程的主要內容之一。


    在DIV+CSS網頁佈局方式中元素定位是比較晦澀的方面,即使有經驗的CSS開發人員也會遇到一些問題。本文“《一步一步跟我學PHP》第十三講：盒子的定位例項”試圖針對CSS定位的三種基本機制和四種定位方式進行一些深人的分析，使DIV+CSS網頁佈局中的定位技術更容易被理解和應用。


【推薦閱讀】
            陳力：傳智播客古代 珍寶幣 泡泡龍遊戲開發第十三講：盒子的定位例項



相關文章