整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ss布局模型
清楚了CSS盒模型的基本概念、盒模型類型,我們就可以深入探討網(wǎng)頁(yè)布局的基本模型了。布局模型與盒模型一樣都是CSS最基本、最核心的概念。
但布局模型是建立在盒模型基礎(chǔ)之上,又不同于我們常說(shuō)的CSS布局樣式或CSS布局模板。如果說(shuō)布局模型是本,那么CSS布局模板就是末了,是外在的表現(xiàn)形式。
CSS包含3種基本的布局模型,用英文概括為：Flow、Layer和Float。
在網(wǎng)頁(yè)中,元素有三種布局模型：
1、流動(dòng)模型(Flow)
2、浮動(dòng)模型(Float)
3、層模型(Layer)
流動(dòng)模型(一)
先來(lái)說(shuō)一說(shuō)流動(dòng)模型,流動(dòng)(Flow)是默認(rèn)的網(wǎng)頁(yè)布局模式。也就是說(shuō)網(wǎng)頁(yè)在默認(rèn)狀態(tài)下的HTML網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的。
流動(dòng)布局模型具有2個(gè)比較典型的特征：
第一點(diǎn),塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布,因?yàn)樵谀J(rèn)狀態(tài)下,塊狀元素的寬度都為100%。
實(shí)際上,塊狀元素都會(huì)以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個(gè)塊狀元素標(biāo)簽(div,h1,p)寬度顯示為100%。
流動(dòng)模型（二）
第二點(diǎn),在流動(dòng)模型下,內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。(內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行)
標(biāo)簽a、span、em、strong都是內(nèi)聯(lián)元素。
浮動(dòng)模型
塊狀元素這么霸道都是獨(dú)占一行,如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示,怎么辦呢？不要著急,設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)這一愿望。
任何元素在默認(rèn)情況下是不能浮動(dòng)的,但可以用CSS定義為浮動(dòng),如 div、p、table、img 等元素都可以被定義為浮動(dòng)。
如下代碼可以實(shí)現(xiàn)兩個(gè)div元素一行顯示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>層模型
什么是層布局模型?層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣,每個(gè)圖層能夠精確定位操作,
但在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域,由于網(wǎng)頁(yè)大小的活動(dòng)性,層布局沒(méi)能受到熱捧。但是在網(wǎng)頁(yè)上局部使用層布局還是有其方便之處的。
下面我們來(lái)學(xué)習(xí)一下html中的層布局。
如何讓html元素在網(wǎng)頁(yè)中精確定位,就像圖像軟件PhotoShop中的圖層一樣可以對(duì)每個(gè)圖層能夠精確定位操作。
CSS定義了一組定位(positioning)屬性來(lái)支持層布局模型。
層模型有三種形式：
1、絕對(duì)定位(position: absolute)
2、相對(duì)定位(position: relative)
3、固定定位(position: fixed)
著移動(dòng)設(shè)備和不同屏幕大小的設(shè)備的普及，為網(wǎng)站設(shè)計(jì)一個(gè)能自適應(yīng)不同設(shè)備的界面對(duì)于設(shè)計(jì)師和開(kāi)發(fā)人員至關(guān)重要。流動(dòng)布局提供了一種靈活的布局方法，可以根據(jù)設(shè)備的尺寸和方向自動(dòng)調(diào)整元素的布局。
流動(dòng)布局的特性
流動(dòng)布局具有以下特性：
* 元素的寬度或高度會(huì)隨著屏幕大小的改變而自動(dòng)調(diào)整。
* 元素會(huì)自動(dòng)在不同的設(shè)備方向（橫屏或縱屏）中排列。
* 確保所有元素都適合設(shè)備的屏幕。
使用 flexbox 的流動(dòng)布局
Flexbox 是 CSS 中的一種靈活布局模型，可用于創(chuàng)建流動(dòng)布局。其特性如下：
* 將元素排成一行或列。
* 自動(dòng)調(diào)整元素的寬度或高度以填充可用空間。
* 改變?cè)氐呐帕许樞颉?/p>
使用 grid 的流動(dòng)布局
Grid 是一種更復(fù)雜的布局模型，它提供了更強(qiáng)大的靈活性和控制能力。其特性如下：
* 將頁(yè)面布局成網(wǎng)格。
* 在網(wǎng)格中定義元素的位置。
* 自動(dòng)調(diào)整元素的寬度或高度以填充網(wǎng)格。
結(jié)論
流動(dòng)布局是現(xiàn)代網(wǎng)站開(kāi)發(fā)中必不可少的技術(shù)，可以提供自適應(yīng)不同設(shè)備的靈活布局。通過(guò)使用 flexbox 或 grid，可以創(chuàng)建具有美觀和功能強(qiáng)大的流動(dòng)布局。
<table>標(biāo)簽：
<table>指的是表格，用表格來(lái)搭建界面布局，即用表格的嵌套，來(lái)搭建界面布局。
<table>布局優(yōu)勢(shì)：
table優(yōu)勢(shì)：開(kāi)發(fā)時(shí)間短（使用DW開(kāi)發(fā)速度快）；純table各瀏覽器不會(huì)有兼容問(wèn)題；內(nèi)容可自適應(yīng)；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開(kāi)發(fā)；如果table里有div ul 等，可能會(huì)出現(xiàn)瀏覽器兼容問(wèn)題；加載速度慢；table嵌套的太多，運(yùn)維是非常困難的。
<div>塊級(jí)（block-level）標(biāo)簽：
DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。
<div>布局優(yōu)勢(shì)：
一.精簡(jiǎn)代碼，減少重構(gòu)難度。
網(wǎng)站使用DIV+CSS布局使代碼很是精簡(jiǎn)，css文件可以在網(wǎng)站的任意一個(gè)頁(yè)面進(jìn)行調(diào)用，而若是使用table表格修改部分頁(yè)面卻是顯得很麻煩。要是一個(gè)門(mén)戶網(wǎng)站的話，需手動(dòng)改很多頁(yè)面，而且看著那些表格也會(huì)感覺(jué)很亂也很浪費(fèi)時(shí)間，但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。
二.網(wǎng)頁(yè)訪問(wèn)速度
使用了DIV+CSS布局的網(wǎng)頁(yè)與Table布局比較，精簡(jiǎn)了許多頁(yè)面代碼，那么其瀏覽訪問(wèn)速度自然得以提升，也從而提升了網(wǎng)站的用戶體驗(yàn)度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好，因此其避免了Table嵌套層次過(guò)多而無(wú)法被搜索引擎抓取的問(wèn)題，而且簡(jiǎn)潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁(yè)，在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位，而div+css則不會(huì)，無(wú)論什么瀏覽器，網(wǎng)頁(yè)都不會(huì)出現(xiàn)變形情況。
1.流動(dòng)式布局：是HTML網(wǎng)頁(yè)默認(rèn)的布局方式
特點(diǎn)：
1.塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下按順序處置延伸分布，且默認(rèn)狀態(tài)下，塊級(jí)元素占整個(gè)文檔流，默認(rèn)寬度為100%。
2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示，不占整個(gè)文檔流。
常見(jiàn)的塊級(jí)（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見(jiàn)的內(nèi)內(nèi)聯(lián)（行內(nèi)）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動(dòng)布局（float）
特點(diǎn)：
浮動(dòng)布局依靠【 浮動(dòng)屬性 float：left/right/... 】來(lái)使標(biāo)簽脫離文檔流，達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。
float：left ； 浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。
同時(shí)可以依靠【展示屬性display：inline/block/inline-block】來(lái)進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點(diǎn)：
當(dāng)我們應(yīng)擁div布局是，在第一層塊界面上來(lái)做第二層塊界面的開(kāi)發(fā)時(shí)，就要用到我們所說(shuō)的定位布局。
通過(guò)運(yùn)用【定位屬性position:absolute/relative/fixed】 來(lái)進(jìn)行第二層界面的定位布局。
網(wǎng)頁(yè)是靜態(tài)的，網(wǎng)頁(yè)上的定位
position：absolute ；絕對(duì)定位脫離文檔流，不受浮動(dòng)影響，就是相對(duì)于窗體（body）邊界的margin定位。
position：relative； 相對(duì)定位不脫離文檔流，相對(duì)于父級(jí)標(biāo)簽元素的位置定位。
position:fixed；固定位置，不會(huì)受任何因素影響。
滾動(dòng)條移動(dòng)前
滾動(dòng)條移動(dòng)后
優(yōu)先層顯示方法：【屬性：z-index:0/1/2...】
特點(diǎn)： 數(shù)值越大，越優(yōu)先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內(nèi)容來(lái)自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系修改。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
