ss布局模型

清楚了CSS盒模型的基本概念、盒模型類型,我們就可以深入探討網(wǎng)頁布局的基本模型了。布局模型與盒模型一樣都是CSS最基本、最核心的概念。

但布局模型是建立在盒模型基礎(chǔ)之上,又不同于我們常說的CSS布局樣式或CSS布局模板。如果說布局模型是本,那么CSS布局模板就是末了,是外在的表現(xiàn)形式。

CSS包含3種基本的布局模型,用英文概括為：Flow、Layer和Float。

在網(wǎng)頁中,元素有三種布局模型：

1、流動模型(Flow)

2、浮動模型(Float)

3、層模型(Layer)

流動模型(一)

先來說一說流動模型,流動(Flow)是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。

流動布局模型具有2個比較典型的特征：

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

實(shí)際上,塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標(biāo)簽(div,h1,p)寬度顯示為100%。

流動模型（二）

第二點(diǎn),在流動模型下,內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。(內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行)

標(biāo)簽a、span、em、strong都是內(nèi)聯(lián)元素。

浮動模型

塊狀元素這么霸道都是獨(dú)占一行,如果現(xiàn)在我們想讓兩個塊狀元素并排顯示,怎么辦呢？不要著急,設(shè)置元素浮動就可以實(shí)現(xiàn)這一愿望。

任何元素在默認(rèn)情況下是不能浮動的,但可以用CSS定義為浮動,如 div、p、table、img 等元素都可以被定義為浮動。

如下代碼可以實(shí)現(xiàn)兩個div元素一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

層模型

什么是層布局模型?層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣,每個圖層能夠精確定位操作,

但在網(wǎng)頁設(shè)計領(lǐng)域,由于網(wǎng)頁大小的活動性,層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的。

下面我們來學(xué)習(xí)一下html中的層布局。

如何讓html元素在網(wǎng)頁中精確定位,就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。

CSS定義了一組定位(positioning)屬性來支持層布局模型。

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

著移動設(shè)備和不同屏幕大小的設(shè)備的普及，為網(wǎng)站設(shè)計一個能自適應(yīng)不同設(shè)備的界面對于設(shè)計師和開發(fā)人員至關(guān)重要。流動布局提供了一種靈活的布局方法，可以根據(jù)設(shè)備的尺寸和方向自動調(diào)整元素的布局。

流動布局的特性

流動布局具有以下特性：

* 元素的寬度或高度會隨著屏幕大小的改變而自動調(diào)整。

* 元素會自動在不同的設(shè)備方向（橫屏或縱屏）中排列。

* 確保所有元素都適合設(shè)備的屏幕。

使用 flexbox 的流動布局

Flexbox 是 CSS 中的一種靈活布局模型，可用于創(chuàng)建流動布局。其特性如下：

* 將元素排成一行或列。

* 自動調(diào)整元素的寬度或高度以填充可用空間。

* 改變元素的排列順序。

使用 grid 的流動布局

Grid 是一種更復(fù)雜的布局模型，它提供了更強(qiáng)大的靈活性和控制能力。其特性如下：

* 將頁面布局成網(wǎng)格。

* 在網(wǎng)格中定義元素的位置。

* 自動調(diào)整元素的寬度或高度以填充網(wǎng)格。

結(jié)論

流動布局是現(xiàn)代網(wǎng)站開發(fā)中必不可少的技術(shù)，可以提供自適應(yīng)不同設(shè)備的靈活布局。通過使用 flexbox 或 grid，可以創(chuàng)建具有美觀和功能強(qiáng)大的流動布局。