兩天學會css基礎（二）

標籤：知識   基礎   height   pos   置中   lib   屬性   導航   移位   

接上一篇部落格，還有css中的兩個重要知識點沒有說到，就是元素的浮動與定位。

第三部分：元素的浮動與清除

這部分的內容之前的部落格已總結過。請查看css中的浮動與三種清除浮動的方法這篇文章。

浮動在網頁中也用的和普遍，特別要注意清除浮動的方法。

第四部分：元素的定位

元素的定位在實際開發中會經常用到，特別是涉及到精確定位的時候。

預設情況下元素的position屬性值為static

static：

對象遵循常規流。此時4個定位位移屬性不會被應用。

relative：

對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位位移屬性進行位移時不會影響常規流中的任何元素。

absolute：

對象脫離常規流，此時位移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的位移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊。

對一些div盒子做精確定位的時候會經常用到。

fixed：

與absolute一致，但位移定位是以視窗為參考。當出現捲軸時，對象不會隨著滾動。

頁面中見到的一些固定導航條就用到了這個屬性。

當position的值為非static時，其層疊層級通過z-index屬性定義。Z-index取值範圍為大於等於1的整數。

 

到此，浮動與定位的知識已經講解完畢。浮動與定位主要解決了頁面上元素的擺放位置的問題。

補充：

Css布局常見問題。

1，如何讓元素置中？

方法1：設定元素的margin屬性為margin：0 auto；則其相對於父元素置中顯示。

方法2：將元素設定為絕對位置，父元素為相對定位，left值為父元素寬度的一半，margin-left值為自身的一半且為負值，元素水平置中。

2，如何讓文本置中？

設定text-align：center；使文本水平置中。設定line-height屬性值等於元素個高度。使其上下置中。

 

本篇只對css基礎部分做以總結，對於css3加入的新特性，後續會單獨總結。

兩天學會css基礎（二）