css樣式基礎三

標籤：

css的定位：

其中css中被分為區塊層級元素與行內元素。如區塊層級元素div、hx標籤、p元素。行內元素span和strong

W3school給出的一切皆為框的定義。

而且可以使用display屬性，強行將行內元素變為區塊層級元素。如display：block。

CSS的定位機制：

主要分為三類：

普通流、浮動、和絕對位置。

position屬性

static元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative元素框位移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

absolute元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。

fixed元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

定位屬性：

position	把元素放置到一個靜態、相對的、絕對的、或固定的位置中。
top	定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的位移。
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的位移。
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的位移。
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的位移。
overflow	設定當元素的內容溢出其地區時發生的事情。
clip	設定元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
vertical-align	設定元素的垂直對齊。
z-index	設定元素的堆疊順序

 

CSS的相對定位：

，移動了位置任然佔有原來的位置。

 

css樣式基礎三