CSS進階之布局模型

標籤：css 前端 html

CSS中含有三種布局模型 流動模型Flow 浮動模型Float 層模型Layer

1. 流動模型

網頁預設的布局模型 特點有兩個

  1.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。

<style type="text/css">    h1,p,div{        border:1px solid red;    }</style>

  650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/87/D5/wKioL1fjIqaz0dwBAAAlFLLjY1w388.jpg-wh_500x0-wm_3-wmp_4-s_1122643368.jpg" title="1.jpg" alt="wKioL1fjIqaz0dwBAAAlFLLjY1w388.jpg-wh_50" />

  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>

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/87/D8/wKiom1fjJMzBIL4RAAASRS0USMM638.jpg-wh_500x0-wm_3-wmp_4-s_5146416.jpg" title="2.jpg" alt="wKiom1fjJMzBIL4RAAASRS0USMM638.jpg-wh_50" />

3.層模型  Layer

能夠實現對於html元素的精準定位（用的不是特別多，但是局部使用層模型可以實現一些效果）

層模型有三種：

絕對位置：position:absolute

    將元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對位置。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。

將div元素相對於瀏覽器視窗向右移動100px 向下移動200px

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>

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/87/D8/wKiom1fjKVjTefJCAAAZ4d2gY8w909.jpg-wh_500x0-wm_3-wmp_4-s_4005721475.jpg" title="3.jpg" alt="wKiom1fjKVjTefJCAAAZ4d2gY8w909.jpg-wh_50" />

固定定位：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的組合使用

由上面知道position:absolute是相對於瀏覽器進行定位的，可以通過position:relative實現position:absolute相對於其他的元素定位 但是必須滿足以下幾點：

  1.被參照元素必須是定位元素的父元素

  2.被參照元素設定為position:relative

  3.定位元素設定為position:absolute

#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>

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/87/D9/wKiom1fjLb3gpi1ZAAARduKmcOM410.jpg-wh_500x0-wm_3-wmp_4-s_1811875071.jpg" title="3.jpg" alt="wKiom1fjLb3gpi1ZAAARduKmcOM410.jpg-wh_50" />

這樣就實現了div2相對於div1來定位了。

本文出自 “厚積薄發” 部落格，請務必保留此出處http://joedlut.blog.51cto.com/6570198/1855267

CSS進階之布局模型