css布局模型是什么

小編給大家分享一下css布局模型是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　流動(dòng)模型（flow）

　　默認(rèn)的網(wǎng)頁(yè)布局模式

　　*塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布

　　*內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示

　　浮動(dòng)模型（float）

　　任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用CSS定義為浮動(dòng)

　　兩個(gè)div元素一行

　　div{

　　width:200px;

　　height:200px;

　　border:2pxredsolid;

　　float:left;

　　}

　　<divid="div1"></div>

　　<divid="div2"></div>

　　效果圖

　　設(shè)置兩個(gè)元素右浮動(dòng)實(shí)現(xiàn)一行

　　float:right;

　　div{

　　width:200px;

　　height:200px;

　　border:2pxredsolid;

　　float:right;

　　}

　　這里寫圖片描述

　　設(shè)置兩個(gè)元素一左一右

　　div{

　　width:200px;

　　height:200px;

　　border:2pxredsolid;

　　}

　　#div1{float:left;}

　　#div2{float:right;}

　　效果圖

　　層模型（layer）

　　層模型三種形式：

　　-絕對(duì)定位(position:absolute)

　　-相對(duì)定位(position:relative)

　　-固定定位(position:fixed)

　　層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作

　　1.絕對(duì)定位

　　position:absolute(表示絕對(duì)定位)，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。

　　實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px，向下移動(dòng)50px。

　　div{

　　width:200px;

　　height:200px;

　　border:2pxredsolid;

　　position:absolute;

　　left:100px;

　　top:50px;

　　}

　　<divid="div1"></div>

　　效果圖

　　2.相對(duì)定位

　　position:relative（表示相對(duì)定位），它通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。

　　相對(duì)于以前位置向下移動(dòng)50px，向右移動(dòng)100px;

　　#div1{

　　width:200px;

　　height:200px;

　　border:2pxredsolid;

　　position:relative;

　　left:100px;

　　top:50px;

　　}

　　<divid="div1"></div>

　　效果圖

　　3.固定定位

　　fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同。

　　相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。

　　#div1{

　　width:200px;

　　height:200px;

　　border:2pxredsolid;

　　position:fixed;

　　left:100px;

　　top:50px;

　　}

　　<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

　　....

　　4.Relative與Absolute組合使用

　　相對(duì)于其它元素進(jìn)行定位

　　1、參照定位的元素必須是相對(duì)定位元素的前輩元素：

　　<divid="box1"><!--參照定位的元素-->

　　<divid="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->

　　</div>box1是box2的父元素

　　2、參照定位的元素必須加入position:relative;

　　#box1{

　　width:200px;

　　height:200px;

　　position:relative;

　　}

　　3、定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。

　　#box2{

　　position:absolute;

　　top:20px;

　　left:30px;

　　}

以上是“css布局模型是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！