CSS自學筆記（7）:CSS定位

標籤：style   blog   http   color   os   strong   io   2014   

很多時候，我們需要對一些元素進行自訂排序、布局等，這是就需要用到CSS的定位屬性了，用這些屬性對一些元素進行自訂排序、布局等操作，可以改變瀏覽器預設的死板的排序。

CSS定位的功能很容易理解，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。

CSS的定位(position)屬性有四種不同的定位類型，從而影響元素框的聲稱方式。

CSS 內邊距屬性

屬性	描述	備忘
static	元素框正常產生	區塊層級元素產生一個矩形框，作為文檔流的一部分。 行內元素則會建立一個或多個行框，置於其父元素中。
relative	元素框位移某個距離	元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute	元素框從文檔流完全刪除，並相對於其包含塊定位	包含塊可能是文檔中的另一個元素或者是初始包含塊。 元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。 元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。
fixed	元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

CSS的定位機制：普通流，浮動，定位

1.普通流

普通流中的元素框的位置是由(X)HTML中的位置決定的。

區塊層級元素從上到下依次排列。

框之間的垂直距離有框的margin屬性計算得到，行內元素在一行中水平布局。

2.定位

定位有相對定位和絕對位置之分。

相對定位，就是要定位的元素會（相對於普通流中的位置）位移某個距離，元素仍保持其未定位以前的形狀，它原本所佔用的空間繼續保留。移動元素可能會覆蓋其他元素。

#box_relative {  position: relative;  left: 30px;  top: 20px;}

絕對位置，就是將要定位的元素框從普通流中完全刪除，並相對與其包含塊(可能是文檔中另一個元素或者是初始包含塊)定位。該元素原先在普通流中所佔用的空間會關閉。

#box_relative {  position: absolute;  left: 30px;  top: 20px;}

絕對位置的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

註：絕對位置與普通流無關，所以它可以覆蓋頁面上的其他元素，這時可以通過設定z-index屬性來控制這些框的堆放次序。

3.浮動

浮動，可以左右移動元素框，只得到它的邊緣碰到包含框或者另一個浮動框為止。浮動的框脫離了普通流。

如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”

在CSS中，我們可以通過float屬性來完成浮動效果。

浮動的效果可以用在很多元素中

div{  float:right;  width:120px;  margin:0 0 15px 20px;  padding:15px;  border:1px solid black;  text-align:center;}

使段落的首字元浮動於左側，並向這個字元添加樣式

span{  float:left;  width:0.7em;  font-size:400%;  font-family:algerian,courier;  line-height:80%;}

也可以用浮動效果來完成一列具有超連結的菜單

ul{  float:left;  width:100%;  padding:0;  margin:0;  list-style-type:none;}a{  float:left;  width:7em;  text-decoration:none;  color:white;  background-color:#06C;  padding:0.2em 0.6em;  border-right:1px solid white;}