css布局模型是什么

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

在蓬溪等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營(yíng)銷推廣,外貿(mào)營(yíng)銷網(wǎng)站建設(shè),蓬溪網(wǎng)站建設(shè)費(fèi)用合理。

流動(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：css布局模型是什么
網(wǎng)頁(yè)網(wǎng)址：http://www.jbt999.com/article28/psppcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、企業(yè)建站、商城網(wǎng)站、外貿(mào)建站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)