html布局的常見(jiàn)類型是什么

這篇文章給大家分享的是有關(guān)html布局的常見(jiàn)類型是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

1、流動(dòng)布局（html網(wǎng)頁(yè)默認(rèn)的布局方式）

特點(diǎn)：

1、塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。

2、內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）

2、浮動(dòng)布局(float)

特點(diǎn)：默認(rèn)布局下，塊狀元素這么霸道都是獨(dú)占一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示。就需要使用float來(lái)實(shí)現(xiàn)。

如下

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

3、層模型

特點(diǎn)：如果我想一個(gè)div在另外一個(gè)div的上面，我們就需要可以使用絕對(duì)定位來(lái)完成，層模型的三種定位方式relative、absolute、fixed

絕對(duì)定位（absolute）

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

相對(duì)定位（relative）

如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置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)。

固定定位（fixed）

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?屬性功能相同。

注意：

在使用z-index屬性的時(shí)候，只有元素使用了position屬性的，才具有z-index屬性。沒(méi)有使用position的屬性的元素是沒(méi)有z-index屬性的，設(shè)置了也沒(méi)有用

感謝各位的閱讀！關(guān)于“html布局的常見(jiàn)類型是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！