網(wǎng)頁(yè)元素常見(jiàn)的定位方式

時(shí)間：2023-09-02 04:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-02 04:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)元素常見(jiàn)的定位方式：1. 流式定位

這是網(wǎng)頁(yè)元素默認(rèn)的定位方式，網(wǎng)頁(yè)元素按照其HTML標(biāo)簽的先后順序，在網(wǎng)頁(yè)內(nèi)依次顯示，就像液體一樣“流動(dòng)”，所以稱(chēng)為“流式定位”，這種方式將所有網(wǎng)頁(yè)元素的默認(rèn)顯示方式分為以下幾種類(lèi)型：

塊級(jí)元素（display: block）： 可以設(shè)置寬度，默認(rèn)寬度為100%，但不管多寬都會(huì)獨(dú)占一行，多個(gè)塊級(jí)元素按從上到下的順序縱向顯示，默認(rèn)顯示為塊級(jí)元素的包括：段落(p)、層(div)、表單(form)等。

內(nèi)聯(lián)元素（display: inline）： 不會(huì)獨(dú)占一行，可以多個(gè)元素共享一行，按從左至右的順序橫向顯示，默認(rèn)顯示為內(nèi)聯(lián)元素的包括：文本標(biāo)簽(label)、鏈接(a)等。

行內(nèi)塊元素（display: inline-block）： 這種定位方式兼具塊級(jí)元素和內(nèi)聯(lián)元素的優(yōu)勢(shì)，既可以像塊級(jí)元素一樣設(shè)置寬度和高度，又可以一行放置多個(gè)，默認(rèn)顯示為內(nèi)聯(lián)元素的包括：圖片(img)、輸入項(xiàng)(input)、多行文本(textarea)等。

可以通過(guò)設(shè)置HTML元素的CSS樣式的display屬性來(lái)改變?cè)啬J(rèn)的流式定位方式，例如將層(div)元素設(shè)置為行內(nèi)塊元素后，就可以跟文本標(biāo)簽(label)、圖片(img)等元素放在同一行顯示，不再獨(dú)占一行。

流式定位存在一些問(wèn)題，主要包括：

l 塊級(jí)元素很難被有效利用起來(lái)，因?yàn)槠洫?dú)占一行的特性，不能一行顯示多個(gè)。

l 內(nèi)聯(lián)元素?zé)o法設(shè)置寬度、高度和垂直方向邊距，不好精確控制元素大小和顯示位置。

l 內(nèi)聯(lián)元素之間水平方向會(huì)因?yàn)榇a中的空格、換行等產(chǎn)生間隙，垂直方向存在默認(rèn)的底部間隙，這給水平布局帶來(lái)額外的麻煩。

2. 浮動(dòng)定位

浮動(dòng)定位會(huì)讓元素脫離原來(lái)的標(biāo)準(zhǔn)文檔流浮動(dòng)起來(lái)，直至它的外邊緣遇到父元素的內(nèi)邊緣或者另一個(gè)兄弟浮動(dòng)元素的外邊緣。

任何HTML元素都可以設(shè)置為浮動(dòng)，可以通過(guò)設(shè)置HTML元素的CSS樣式的float屬性來(lái)設(shè)置具體的浮動(dòng)方式，可以選擇向左浮動(dòng)（float: left）或向右浮動(dòng)（float: right）。

相對(duì)于網(wǎng)頁(yè)默認(rèn)的流式定位，浮動(dòng)定位有以下優(yōu)勢(shì)：

l 多個(gè)塊級(jí)元素可以共享一行。

l 內(nèi)聯(lián)元素可以設(shè)置寬度和高度。

l 元素之間的空格、換行不影響元素的顯示位置。

浮動(dòng)定位最初被設(shè)計(jì)出來(lái)是為了實(shí)現(xiàn)文字環(huán)繞圖片顯示的效果，但由于其上述優(yōu)勢(shì)，后來(lái)大家也用浮動(dòng)定位來(lái)設(shè)置更多網(wǎng)頁(yè)元素的位置，代替默認(rèn)的流式定位，也是TaskBuilder默認(rèn)的組件定位方式。

不過(guò)，浮動(dòng)定位也有一些問(wèn)題，不是所有的場(chǎng)合都適合，大家根據(jù)需要選擇，這些問(wèn)題包括：

l 居中對(duì)齊問(wèn)題：浮動(dòng)定位不太好實(shí)現(xiàn)垂直和水平居中對(duì)齊。

l 父元素的高度塌陷問(wèn)題：如果元素不浮動(dòng)，會(huì)自動(dòng)撐開(kāi)父元素的高度，浮動(dòng)后，由于浮動(dòng)元素已經(jīng)脫離原來(lái)的標(biāo)準(zhǔn)流，如果父元素沒(méi)有設(shè)置高度，且父元素中沒(méi)有其他非浮動(dòng)元素時(shí)，會(huì)造成父元素的高度塌陷（高度變成了0）。

3. 坐標(biāo)定位

坐標(biāo)定位是指為HTML元素設(shè)置上下左右的偏移量來(lái)確定其具體的顯示位置或大小，通過(guò)設(shè)置元素CSS的position屬性，可以選擇坐標(biāo)定位的具體方式，包括：

相對(duì)定位（position: relative）：即相對(duì)于元素在流式定位時(shí)的正常位置進(jìn)行定位，您可以通過(guò) top、right、bottom、left 這 4 個(gè)CSS屬性來(lái)設(shè)置元素相對(duì)于正常位置的偏移量，在此過(guò)程中不會(huì)對(duì)其它元素造成影響。







相對(duì)定位示意圖

絕對(duì)定位（position: absolute）：即相對(duì)于第一個(gè)非靜態(tài)定位的父級(jí)元素進(jìn)行定位，可以通過(guò) top、right、bottom、left 這 4 個(gè)屬性來(lái)設(shè)置元素相對(duì)于父級(jí)元素位置的偏移量。如果沒(méi)有滿足條件的父級(jí)元素，則會(huì)相對(duì)于瀏覽器窗口來(lái)進(jìn)行定位。元素使用絕對(duì)定位后，其他標(biāo)準(zhǔn)流元素會(huì)填補(bǔ)它的位置。絕對(duì)定位可以通過(guò)設(shè)置元素CSS樣式的left和top屬性來(lái)精確控制元素的顯示位置，再設(shè)置right或bottom這兩個(gè)CSS樣式，實(shí)現(xiàn)元素的寬度或高度根據(jù)父元素的寬度和高度動(dòng)態(tài)設(shè)置和變化。







絕對(duì)定位示意圖

固定定位（position: fixed）：即相對(duì)于瀏覽器的窗口進(jìn)行定位，可以使用 top、right、bottom、left 這 4 個(gè)CSS屬性來(lái)定義元素相對(duì)于瀏覽器窗口的位置。使用固定定位的元素?zé)o論如何滾動(dòng)瀏覽器窗口，元素的位置都是固定不變的。

粘性定位（position: sticky）：它是相對(duì)定位和固定定位的結(jié)合體，能夠?qū)崿F(xiàn)類(lèi)似吸附的效果，當(dāng)滾動(dòng)頁(yè)面時(shí)它的效果與相對(duì)定位相同，當(dāng)元素要滾動(dòng)到屏幕之外時(shí)則會(huì)自動(dòng)變成固定定位的效果。用粘性定位很容易實(shí)現(xiàn)元素置頂顯示的效果。

4. 表格定位

顧名思義，表格定位就是用表格來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的定位，先繪制一個(gè)多行多列的表格，并設(shè)定表格各列的寬度和各行的高度，然后在表格的單元格里插入相關(guān)網(wǎng)頁(yè)元素，最終實(shí)現(xiàn)這些元素的位置定位。

這種定位方式比較適合可以將頁(yè)面內(nèi)容清晰明確地劃分為多行多列的場(chǎng)景，例如各種業(yè)務(wù)單據(jù)和數(shù)據(jù)報(bào)表等。

有兩種方式可以實(shí)現(xiàn)表格布局： HTML Table（<table>標(biāo)簽）和CSS Table（display:table 等相關(guān)屬性）。HTML Table是早期網(wǎng)頁(yè)設(shè)計(jì)采用的表格定位方式，由于其渲染性能較低，且有些界面效果較難實(shí)現(xiàn)，用的人已經(jīng)比較少了，現(xiàn)在推薦使用CSS Table，能實(shí)現(xiàn)一些HTML Table做不到的效果。

目前，TaskBuilder只是在報(bào)表設(shè)計(jì)器里集成了一個(gè)第三方的表格插件，在前端tfp頁(yè)面設(shè)計(jì)器里，還沒(méi)有提供表格定位相應(yīng)的容器組件，未來(lái)會(huì)提供。（現(xiàn)有的可編輯表格和數(shù)據(jù)表格不是用來(lái)為其他組件提供定位的，所以不能算作是表格定位的容器組件）

5. 彈性定位

彈性定位又叫彈性布局，這種定位方式最大的特點(diǎn)就是可以讓子元素的大小可以根據(jù)父元素的大小自動(dòng)擴(kuò)張或收縮，從而可以做到自動(dòng)適應(yīng)不同終端的屏幕尺寸，或者在用戶改變?yōu)g覽器窗口大小時(shí)自動(dòng)伸縮。

這種定位方式需要先將一個(gè)父元素的CSS屬性display設(shè)置為flex，然后該元素里的子元素即可實(shí)現(xiàn)彈性定位。

采用彈性定位的容器元素可以設(shè)置以下CSS樣式：

元素排列方向（flex-direction）：用來(lái)設(shè)置子元素的排列方向，有四種方式可以選擇：從左到右顯示（row）、從右到左顯示（row-reverse）、從上到下顯示（column）、從下到上顯示（column-reverse）。







元素水平對(duì)齊方式（justify-content）：用來(lái)設(shè)置子元素在水平方向的對(duì)齊方式，可以選左對(duì)齊（flex-start）、右對(duì)齊（flex-end）、居中對(duì)齊（center）、兩端對(duì)齊（space-between）和等距對(duì)齊（space-around）。







元素垂直對(duì)齊方式（align-items）：用來(lái)設(shè)置子元素在垂直方向的對(duì)齊方式，可以選頂部對(duì)齊（flex-start）、底部對(duì)齊（flex-end）、居中對(duì)齊（center）、基線對(duì)齊（baseline）、自動(dòng)伸展（stretch）。







內(nèi)容整體對(duì)齊方式（align-content）：當(dāng)有多行子元素時(shí)，可以用該屬性設(shè)置全部子元素整體的垂直對(duì)齊方式，包括自動(dòng)拉伸（stretch）、在容器的頂部排列（flex-start）、在容器的底部排列（flex-end）、在容器內(nèi)居中排列（center）、均勻分布，上下靠邊（space-between）、均勻分布，每行等距（space-around）。







元素是否自動(dòng)換行（flex-wrap）：用來(lái)設(shè)置子元素是否自動(dòng)換行。







彈性定位容器內(nèi)的子元素可以設(shè)置以下CSS樣式：

擴(kuò)展量（flex-grow）：必須參數(shù)，用來(lái)設(shè)置當(dāng)前元素相對(duì)于其他元素的增長(zhǎng)量，默認(rèn)值為 0，即如果存在剩余空間，也不自動(dòng)放大。

如果所有元素的擴(kuò)展量都設(shè)置為1，將等分剩余空間。如果一個(gè)元素的擴(kuò)展量設(shè)置為2，其他元素都為1，則前者占據(jù)的剩余空間將是其他項(xiàng)的2倍，如下圖所示：







收縮量（flex-shrink）：必須參數(shù)，用來(lái)設(shè)置當(dāng)彈性容器空間不足時(shí)，該元素相對(duì)于其他元素的收縮量，默認(rèn)值為 1。如果所有元素的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)元素的flex-shrink屬性為0，其他元素都為1，則空間不足時(shí)，前者不縮小。







基準(zhǔn)長(zhǎng)度（flex-basis）：必須參數(shù)，元素的基準(zhǔn)長(zhǎng)度定義了父容器在分配多余空間之前，當(dāng)前元素占據(jù)的主軸空間（main size，如果是橫向排列，則指父容器在水平方向的空間，如果是縱向排列，則指父容器在垂直方向的空間）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。合法值為 auto（默認(rèn)值，表示根據(jù)其他情況自動(dòng)伸縮），或者以具體的值加 "%"、"px"等單位的形式，表示該元素將占據(jù)固定空間。

顯示順序（order）：屬性用來(lái)設(shè)置元素在容器中出現(xiàn)的順序，您可以通過(guò)具體的數(shù)值來(lái)定義元素在容器中的位置，默認(rèn)值為 0。下圖所示的四個(gè)普通的面板組件，在彈性面板里從左至右的正常插入順序是panel1、panel2、panel3、panel4，但通過(guò)設(shè)置這四個(gè)面板的顯示順序，將panel1和panel4的顯示位置進(jìn)行了調(diào)換。







對(duì)齊方式（align-self）：該屬性允許您為某個(gè)特定的元素設(shè)置不同于其它元素的對(duì)齊方式，該屬性可以覆蓋父容器組件（彈性面板）里的垂直對(duì)齊屬性的值。該屬性的可選頂部對(duì)齊（flex-start）、底部對(duì)齊（flex-end）、居中對(duì)齊（center）、基線對(duì)齊（baseline）、自動(dòng)伸展（stretch）。







由于彈性定位的自動(dòng)伸縮特性，且易于實(shí)現(xiàn)子元素的水平和垂直對(duì)齊，目前很多主流的前端UI框架都大量地采用了該定位方式。