1、第七章 盒子的浮動與定位第七章 盒子的浮動與定位 CSS 有三種基本的定位機制：普通流、浮動和定位。 除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在HTML中的位置決定。 在下面的章節，我們會為您詳細講解：浮動、定位第七章 盒子的浮動與定位 浮動 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。第七章 盒子的浮動與定位值leftrightnone描述圖像或文本浮動在父元素的左邊。圖像或文本浮動在父元素的右邊。圖像或文本浮動顯示在它在父元素中出現的位

2、置。float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動某元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。第七章 盒子的浮動與定位 準備代碼,如圖所示：這是標準流布局方式，下面進行浮動試驗。第七章 盒子的浮動與定位 試驗1：對第一個盒子進行左浮動。火狐瀏覽器IE瀏覽器對“大公子”進行浮動后，“大公子”脫離了標準流，“二公子”占據了“大公子”的位置，視“大公子”于無形。第七章 盒子的浮動與定位火狐瀏覽器IE瀏覽器試驗2：對第一和第二個盒子進行左浮動。對“大公

3、子”和“二公子”都進行浮動，它們都脫離了標準流，“三公子 ”視大哥二哥于無形，占據了它們的位置。第七章 盒子的浮動與定位 試驗3：對三個盒子都進行左浮動。對三個“公子”都進行浮動，它們都脫離了標準流，文字部分馬上占據了“三個公子”的位置。三個盒子有一定的空間把文字擠到一邊，形成圖文混排效果。第七章 盒子的浮動與定位 試驗4：在例3基礎上，對“三公子”右浮動對“三公子”進行右浮動后，盒子進行相應移動，文字依然見縫插針，對盒子進行環繞。第七章 盒子的浮動與定位 試驗5：“二公子”和“三公子”浮動互換這就是傳說中的“乾坤大挪移”，CSS布局，可以實現在HTML不做任何改動的情況下，調換盒子的顯示位置

4、。第七章 盒子的浮動與定位 試驗6：增加div的高度 增加某一個div高度之后，文字依然環繞盒子。第七章 盒子的浮動與定位試驗7：清除浮動如果不希望文字環繞盒子，就應對文字清除浮動的影響。注意：對clear屬性的設置要放到文字所在的盒子里，而不是放到“浮動”的盒子里。.clear clear:both;第七章 盒子的浮動與定位試驗8：去掉文字后，要解決高度自適應問題。去掉文字后，因為三個盒子都脫離了標準流，所以父DIV視三個“公子”于無形。把高度收回。如圖所示。解決方法是：在三個“公子”腳下加，并對.clearclear:both;進行清除浮動。第七章 盒子的浮動與定位 定位static （靜

5、態定位）元素框正常生成。relative （相對定位）元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。absolute （絕對定位）元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。fixed （固定定位）元素框的表現類似于將 position 設置為 absolute，其包含塊是視窗本身。（不支持IE6）第七章 盒子的浮動與定位 CSS 相對定位相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將以起點為參照，垂直或水平移動。注意: 在使用相對定

6、位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。第七章 盒子的浮動與定位 CSS 絕對定位 絕對定位使元素的位置與文檔流無關，因此不占據空間。 普通流中其它元素的布局就像絕對定位的元素不存在一樣。屬性positiontoprightbottomleftoverflowclipvertical-alignz-index描述把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。定義了定位元素左外邊

7、距邊界與其包含塊左邊界之間的偏移。設置當元素的內容溢出其區域時發生的事情。設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。設置元素的垂直對齊方式。設置元素的堆疊順序。第七章 盒子的浮動與定位值absolutefixedrelativestatic描述生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定。生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定。生成相對定位的元素，相對于其正常位置進行定位。因此，le

8、ft:20 會向元素的 LEFT 位置添加 20 像素。默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left,right 或者 z-index 聲明）。position 屬性規定元素的定位類型。第七章 盒子的浮動與定位 實例：小頁面在瀏覽器上下左右居中。.box position:absolute;width:650px;height:298px;left:50%;top:50%;background-color:#CCC;margin-left:-325px; /*設置為寬度的一半*/margin-top:-149px; /*設置為高度的一半*/ 第七章 盒子的浮

9、動與定位值visiblehiddenscrollauto描述默認值。內容不會被修剪，會呈現在元素框之外。內容會被修剪，并且其余內容是不可見的。內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。overflow 屬性規定當內容溢出元素框時發生的事情。第七章 盒子的浮動與定位值baselinesubsupertoptext-topmiddlebottomtext-bottomlength%描述默認。元素放置在父元素的基線上。垂直對齊文本的下標。垂直對齊文本的上標把元素的頂端與行中最高元素的頂端對齊把元素的頂端與父元素字體的頂端對齊把此元素放置在父元素的中部。把元素的頂端與行中最低的元素的頂端對齊。把元素的底端與父元素字體的底端對齊。使用 line-height 屬性的百分比值來排列此元素。允許使用負值。vertical-align 屬性設置元素的垂直對齊方式。第七章 盒子的浮動與