CSS 定位：精通網(wǎng)頁(yè)佈局的關(guān)鍵

CSS 定位是網(wǎng)頁(yè)開(kāi)發(fā)中的基礎(chǔ)概念，它賦予開(kāi)發(fā)者控制 HTML 元素在網(wǎng)頁(yè)上顯示方式的能力。理解 CSS 定位對(duì)於創(chuàng)建響應(yīng)式且視覺(jué)上吸引人的網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要。

CSS 專家 Paul O’Brien 強(qiáng)調(diào)，CSS 佈局通常有多種實(shí)現(xiàn)方法，最佳方案往往取決於後續(xù)的需求。初學(xué)者面臨的挑戰(zhàn)在於如何選擇適合當(dāng)前任務(wù)的正確方法。

在 dCode 論壇中，Paul O’Brien 深入探討了 CSS 定位，解答了各種問(wèn)題，涵蓋浮動(dòng)、相對(duì)定位、絕對(duì)定位、固定定位、表格顯示和 Flexbox 等主題。該論壇允許更深入、更廣泛地討論問(wèn)題，並向所有希望參與討論的人開(kāi)放。

網(wǎng)頁(yè)元素的定位有時(shí)令人難以捉摸，尤其是在眾多可用方法面前。隨著 Flexbox 和 Grid 佈局以及 CSS3 變換等技術(shù)的引入，可選項(xiàng)還在不斷擴(kuò)展，這些技術(shù)還可以用於實(shí)現(xiàn)令人驚嘆的佈局技巧。

在這個(gè) dCode 論壇中，CSS 專家 Paul O’Brien 回答了關(guān)於 CSS 定位的所有問(wèn)題——從浮動(dòng)、相對(duì)定位、絕對(duì)定位和固定定位到表格顯示，甚至包括 Flexbox。

如果您對(duì) CSS 定位有任何疑問(wèn)，歡迎加入討論！

關(guān)於 dCodes

我們的 dCode 論壇是一個(gè)特色主題，邀請(qǐng)嘉賓深入探討特定領(lǐng)域。與僅持續(xù)一小時(shí)的問(wèn)答環(huán)節(jié)不同，dCode 主題會(huì)長(zhǎng)期開(kāi)放，以便更深入、更廣泛地討論問(wèn)題。您可以提問(wèn)，也可以隨時(shí)關(guān)注，隨著嘉賓解答問(wèn)題並發(fā)布感興趣的內(nèi)容。

關(guān)於 Paul

Paul O’Brien 是 CSS 領(lǐng)域的知名專家。他是里程碑式著作《終極 CSS 參考》的合著者，多年來(lái)一直是許多在 CSS 複雜領(lǐng)域中迷失方向的開(kāi)發(fā)者的指路明燈。

您聽(tīng)說(shuō)過(guò)使用 overflow: hidden 或類似方法來(lái)包含浮動(dòng)元素嗎？正是 Paul 當(dāng)年發(fā)現(xiàn)了這項(xiàng)技術(shù)。

如果 CSS 可以實(shí)現(xiàn)某種效果，Paul 就知道如何實(shí)現(xiàn)。他甚至經(jīng)常指出如何完成人們認(rèn)為不可能完成的事情。

Paul 的主題啟動(dòng)器

為了啟動(dòng)討論，Paul 創(chuàng)建了一個(gè)簡(jiǎn)單的演示，它只是將一個(gè) 50px 固定寬度和高度的紅色方框放置在頁(yè)面的右側(cè)。 HTML 代碼如下：

<div class="wrap">
  <div class="box">Box</div>
</div>

在查看演示之前，請(qǐng)花一些時(shí)間思考一下，您可以用多少種方法來(lái)實(shí)現(xiàn)這個(gè)效果？

您可能會(huì)立即想到大約三種方法，但當(dāng)您深入細(xì)節(jié)時(shí)，您會(huì)發(fā)現(xiàn)實(shí)際上有很多方法可以做到這一點(diǎn)，在我的演示中我停在了15 種，但我不會(huì)驚訝於看到一些我沒(méi)有想到的方法出現(xiàn)！

這是我的演示，看看您是否能想出其他方法來(lái)實(shí)現(xiàn)：

CodePen 演示鏈接

練習(xí)的重點(diǎn)是簡(jiǎn)單地說(shuō)明，在 CSS 中，佈局通常有很多種實(shí)現(xiàn)方法，而且最佳方案往往取決於後續(xù)的需求。我經(jīng)常說(shuō)“CSS 的妙處在於有很多方法可以做同樣的事情”，但初學(xué)者的難點(diǎn)在於知道哪種方法適合當(dāng)前的任務(wù)。

現(xiàn)在您已經(jīng)查看了演示（請(qǐng)誠(chéng)實(shí)），有多少人想到了或理解了演示中的第一種方法？

這是最簡(jiǎn)單、最基本的方法，可能是大多數(shù)人學(xué)習(xí)後就忘記的第一課之一，我猜想你們中很少有人會(huì)想到它。

<div class="wrap">
  <div class="box">Box</div>
</div>

它看起來(lái)很簡(jiǎn)單，但它如何將方框放置在頁(yè)面的右側(cè)？

我們都熟悉 margin: 0 auto，它可以水平居中塊級(jí)元素，但 margin: 0 0 0 auto; 如何將方框移動(dòng)到右側(cè)？

要回答這個(gè)問(wèn)題，您需要參考規(guī)範(fàn)，但簡(jiǎn)化的例子是寬度 內(nèi)邊距 邊距 = 包含塊的寬度。

因此，對(duì)於具有固定寬度的元素，如果其右邊距為零，則左邊距必須等於到包含塊左邊緣的距離。這是通過(guò) margin-left: auto 實(shí)現(xiàn)的。

如果您改為設(shè)置margin-left: 0，則方框會(huì)移動(dòng)到左側(cè)，在從左到右的語(yǔ)言中，margin-right: 0 將等於auto（即使您指定為零），以便框模型的要求能夠成立。

最後，如果您將 margin-left 和 margin-right 都設(shè)置為 auto，則方框?qū)⒕又?，正如我們所熟知和喜?ài)的那樣。

（我已經(jīng)簡(jiǎn)化了答案，因此請(qǐng)閱讀規(guī)範(fàn)以獲得完整的細(xì)節(jié)和理解。）

我提到這種自動(dòng)邊距技術(shù)是因?yàn)樗谑褂肍lexbox 時(shí)是一種常用的技術(shù)，F(xiàn)lex 項(xiàng)目上的自動(dòng)邊距會(huì)將該元素移動(dòng)到框的邊緣（無(wú)論是左、右、上還是下）。順便說(shuō)一句，鮮為人知的是，絕對(duì)定位元素上的 margin: auto 將在固定高度和寬度的容器內(nèi)水平和垂直居中該元素。

關(guān)於邊距就說(shuō)這麼多，請(qǐng)查看第一個(gè)演示中的其餘示例，如果您能想到更多方法來(lái)實(shí)現(xiàn)這個(gè)效果，請(qǐng)隨時(shí)發(fā)布或討論。

如果您不理解任何示例，請(qǐng)進(jìn)行討論，我們可以澄清。

請(qǐng)注意，此主題不僅僅是關(guān)於這第一篇文章，主要是一個(gè)談話點(diǎn)，以保持事情的進(jìn)展，如果您有希望討論的主題，請(qǐng)繼續(xù)。

我期待著回答或被您的問(wèn)題難倒。我不能保證知道所有答案，但我相信如果我不知道答案，其他人也會(huì)有一個(gè)好主意，並參與到談話中。

在 SitePoint 論壇中進(jìn)一步關(guān)注此討論。

關(guān)於 CSS 定位的常見(jiàn)問(wèn)題解答

CSS 定位在網(wǎng)頁(yè)開(kāi)發(fā)中的意義是什麼？

CSS 定位是網(wǎng)頁(yè)開(kāi)發(fā)中的一個(gè)基本概念。它允許開(kāi)發(fā)者控制 HTML 元素在網(wǎng)頁(yè)上的顯示方式。使用 CSS 定位，您可以將元素放置在頁(yè)面上的任何位置，控制多個(gè)元素的佈局，甚至根據(jù)需要重疊元素。理解 CSS 定位對(duì)於創(chuàng)建響應(yīng)式且視覺(jué)上吸引人的網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要。

CSS 定位中的“static”值是如何工作的？

“static”值是 CSS 中 position 屬性的默認(rèn)值。當(dāng)元素設(shè)置為“static”時(shí)，它的位置根據(jù)文檔的正常流程確定。這意味著元素將按其在 HTML 中出現(xiàn)的順序顯示，並且不會(huì)受 top、bottom、left 或 right 屬性的影響。

您可以解釋 CSS 定位中的“relative”值嗎？

當(dāng)元素設(shè)置為“relative”定位時(shí)，它的位置相對(duì)於其正常位置。這意味著您可以將元素從其在正常文檔流中的位置移動(dòng)，而不會(huì)影響其他元素的位置。 “top”、“bottom”、“l(fā)eft”和“right”屬性將決定元素的最終位置。

CSS 中的“absolute”定位是什麼意思？

CSS 中的“absolute”定位允許您相對(duì)於其最近的已定位祖先元素或如果沒(méi)有已定位祖先元素則相對(duì)於初始包含塊來(lái)定位元素。該元素將從正常的文檔流中移除，並且在頁(yè)面佈局中不會(huì)為該元素創(chuàng)建空間。

“fixed”定位與“absolute”定位有何不同？

雖然“absolute”定位將元素相對(duì)於其最近的已定位祖先元素定位，“fixed”定位將元素相對(duì)於瀏覽器窗口定位。這意味著即使您向下滾動(dòng)頁(yè)面，具有“fixed”定位的元素也會(huì)停留在相同的位置。

CSS 中的“sticky”定位是什麼？

“sticky”定位是相對(duì)定位和固定定位的混合體。具有“sticky”定位的元素在超過(guò)指定的閾值之前被視為“relative”，超過(guò)閾值後則被視為“fixed”。這對(duì)於應(yīng)該在您向下滾動(dòng)時(shí)粘貼到視口頂部的元素非常有用。

如何使用 CSS 定位重疊元素？

您可以使用 CSS 定位中的“z-index”屬性來(lái)重疊元素。 “z-index”屬性指定元素的堆疊順序，值越高，越靠近查看者。通過(guò)賦予一個(gè)元素比另一個(gè)元素更高的“z-index”，您可以使其顯示在另一個(gè)元素之上。

CSS 定位如何影響網(wǎng)站的響應(yīng)性？

CSS 定位在使網(wǎng)站具有響應(yīng)性方面起著至關(guān)重要的作用。通過(guò)控制頁(yè)面上元素的位置，您可以確保您的網(wǎng)站在所有屏幕尺寸上都看起來(lái)不錯(cuò)。例如，您可以使用媒體查詢根據(jù)視口大小更改元素的位置。

我可以使用 CSS 定位來(lái)居中元素嗎？

是的，您可以使用 CSS 定位來(lái)居中元素。一種常見(jiàn)的方法是使用“absolute”定位並將 top 和 left 屬性設(shè)置為 50%，然後使用 transform 屬性將元素向後移動(dòng)其寬度和高度的一半。

使用 CSS 定位時(shí)應(yīng)避免哪些常見(jiàn)的陷阱？

一個(gè)常見(jiàn)的陷阱是忘記“absolute”和“fixed”定位會(huì)將元素從正常的文檔流中移除，這可能會(huì)導(dǎo)致其他元素意外移動(dòng)。另一個(gè)陷阱是在多個(gè)屏幕尺寸上沒(méi)有測(cè)試您的網(wǎng)站，因?yàn)樵谝粋€(gè)屏幕尺寸上看起來(lái)不錯(cuò)的定位可能在另一個(gè)屏幕尺寸上不起作用。

以上是解碼CSS定位：與Paul O＆＃x27; Brien的大師班的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！