CSS進階之佈局模型實例詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS進階之佈局模型實例詳解

高洛峰

Mar 23, 2017 am 11:38 AM

css

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

#流動模型

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

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

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

CSS進階之佈局模型實例詳解

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>

CSS進階之佈局模型實例詳解

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

CSS進階之佈局模型實例詳解

固定定位：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>

CSS進階之佈局模型實例詳解