CSS中含有三種佈局模型流動模型Flow 浮動模型Float 層模型Layer
#流動模型
網頁預設的佈局模型特點有兩個
1.塊狀元素都會在所處的包含元素內自上而下依序垂直延伸分佈,因為在預設狀態下,塊狀元素的寬度都為100%。實際上,塊狀元素都會以行的形式佔據位置。
<style type="text/css"> h1,p,div{ border:1px solid red; } </style>
2.在流動模型下,內嵌元素都會在所處的包含元素內從左到右水平分佈顯示。
<a href="http://>www.baidu.com</a><span>hello</span><em>shit</em><strong>world</strong>
www.baidu.com hello shit world 會水平顯示在同一行。
2.浮動模型FLoat
任何元素在預設情況下是不能浮動的,但可以用CSS 定義為浮動,如div、p、table、img 等元素都可以被定義為浮動例如讓下面兩個div元素並排顯示在同一行
div{ border:1px solid red; width:200px; height:200px; float:left;//从左向右排列 } <div>hello</div> <div>world</div>
#3.層模型 Layer
div{ position:absolute; width:100px; height:100px; border:1px solid red; left:100px; top:200px; }相對設定為:position:relative 相對於先前的位置移動,移動的方向和幅度由left、right、top、bottom屬性決定,偏移前的位置保留不動(eh1顯示在如圖所示的位置,這一點尤其要進行注意)。
.div1{ position:relative; width:200px; height:200px; border:1px solid red; left:200px; top:200px; } <span>hello world> <div class="div1">position:relative</div> <span>eh1<span>固定定位:position:fixed 相對移動的座標是檢視(螢幕內的網頁視窗)本身。由於視圖本身是固定的,它不會隨瀏覽器視窗的捲軸滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置
#div2{ position:fixed; bottom:100px; right:100px; width:200px; height:200px; border:1px solid red; } <div id="div2">position:fixed</div>這樣無論瀏覽器中有多少內容,div始終處於視窗的右下角。 position:absolute 和position:relative的組合使用
#div1{ border:1px solid red; width:200px; height:200px; position:relative; } #div2{ border:1px solid red; width:50px; height:50px; left:20px; top:20px; position:absolute; } <div id="div1"> <div id="div2">hello</div> </div>#這樣就實現了div2相對於div1來定位了。
以上是CSS進階之佈局模型實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!