小編給大家分享一下css布局模型是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在蓬溪等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需網(wǎng)站開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),蓬溪網(wǎng)站建設(shè)費(fèi)用合理。
流動模型（flow）
默認(rèn)的網(wǎng)頁布局模式
*塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布
*內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示
浮動模型（float）
任何元素在默認(rèn)情況下是不能浮動的，但可以用CSS定義為浮動
兩個div元素一行
div{
width:200px;
height:200px;
border:2pxredsolid;
float:left;
}
效果圖
設(shè)置兩個元素右浮動實(shí)現(xiàn)一行
float:right;
div{
width:200px;
height:200px;
border:2pxredsolid;
float:right;
}
這里寫圖片描述
設(shè)置兩個元素一左一右
div{
width:200px;
height:200px;
border:2pxredsolid;
}
#div1{float:left;}
#div2{float:right;}
效果圖
層模型（layer）
層模型三種形式：
-絕對定位(position:absolute)
-相對定位(position:relative)
-固定定位(position:fixed)
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作
1.絕對定位
position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
實(shí)現(xiàn)div元素相對于瀏覽器窗口向右移動100px，向下移動50px。
div{
width:200px;
height:200px;
border:2pxredsolid;
position:absolute;
left:100px;
top:50px;
}
效果圖
2.相對定位
position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
相對于以前位置向下移動50px，向右移動100px;
#div1{
width:200px;
height:200px;
border:2pxredsolid;
position:relative;
left:100px;
top:50px;
}
效果圖
3.固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。
相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。
#div1{
width:200px;
height:200px;
border:2pxredsolid;
position:fixed;
left:100px;
top:50px;
}
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
....
4.Relative與Absolute組合使用
相對于其它元素進(jìn)行定位
1、參照定位的元素必須是相對定位元素的前輩元素：
box1是box2的父元素
2、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
以上是“css布局模型是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
