介紹

到目前為止，您已經(jīng)注意到，HTML 從上到下顯示內(nèi)容，大多數(shù)元素堆疊為塊。動(dòng)力節(jié)點(diǎn)小編將帶大家了解如何使用 CSS 將元素放置在頁(yè)面中的任何位置，以創(chuàng)建更具視覺(jué)吸引力的頁(yè)面。

網(wǎng)絡(luò)上的大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)都屬于以下兩種布局之一： 固定寬度或液體。

固定寬度設(shè)計(jì)讓您可以更好地控制頁(yè)面的外觀，但會(huì)給使用小型顯示器設(shè)備的用戶帶來(lái)不便(大量水平滾動(dòng)，人們不喜歡)。流動(dòng)的設(shè)計(jì)會(huì)隨著瀏覽器窗口的大小而增長(zhǎng)或縮小，對(duì)用戶來(lái)說(shuō)更好，但對(duì)設(shè)計(jì)師來(lái)說(shuō)卻讓事情變得更加困難。

固定寬度布局的一個(gè)完美例子是紐約時(shí)報(bào) 網(wǎng)站。調(diào)整頁(yè)面大小。一旦你的屏幕變得小于 970 像素，你會(huì)看到滾動(dòng)條出現(xiàn)并且頁(yè)面沒(méi)有改變。網(wǎng)絡(luò)上的大多數(shù)網(wǎng)站都有固定的寬度，通常在 1000 像素以下(常用值為 960 像素)。

流動(dòng)布局的一個(gè)完美例子是新的谷歌地圖網(wǎng)站。同樣，調(diào)整瀏覽器的大小以查看頁(yè)面內(nèi)容如何隨著窗口大小而縮小或增長(zhǎng)。這種類型的設(shè)計(jì)充分利用了可用空間，但您需要確保它在所有不同尺寸的設(shè)備上看起來(lái)都很好。我們自己的網(wǎng)站也是流體設(shè)計(jì)的一個(gè)例子。調(diào)整窗口大小以體驗(yàn)它。

CSS 布局的工作原理

CSS網(wǎng)頁(yè)布局涉及將內(nèi)容放入頁(yè)面的不同區(qū)域。為此，內(nèi)容需要位于容器標(biāo)簽中，例如：nav、header、section、footer、picture、aside和 ubiquitous div。請(qǐng)記住，如果不需要，則不需要使用div。顯示為塊的元素，例如ul、 、ol，p也可以在頁(yè)面中的任何位置移動(dòng)。

CSS 布局的兩種技術(shù)

布局有兩種通用技術(shù)：浮動(dòng) 和絕對(duì)定位。浮動(dòng)是迄今為止最常用的，因?yàn)樗试S布局流暢。此外，使用浮動(dòng)布局，內(nèi)容永遠(yuǎn)不會(huì)與其他內(nèi)容重疊，因此即使布局不漂亮，它也很實(shí)用。使用絕對(duì)定位，您擁有完全控制的力量和負(fù)擔(dān)。我們將在本閱讀中同時(shí)查看兩者。

要使用浮動(dòng)，您可以從頁(yè)面上垂直堆疊的框的正常布局開始，但您可以允許某些元素移動(dòng)到一側(cè)并讓其他材料在它們周圍流動(dòng)。為此，HTML 元素有一個(gè)屬性float，它可以使元素浮動(dòng)到頁(yè)面的左側(cè)或右側(cè)(您的選擇)。當(dāng)然，除非它足夠窄，否則其他材料無(wú)法在它周圍流動(dòng)，因此我們還必須考慮元素的寬度。我們也會(huì)看看那個(gè)。

絕對(duì)定位允許您以類似像素的精度將元素放置在頁(yè)面上的任何位置。為此，CSS 有一個(gè)position 您設(shè)置為 的屬性，absolute然后使用其他屬性(如left和top)來(lái)指定元素的位置。這種技術(shù)不適用于流暢的設(shè)計(jì)，但適用于定位需要始終在某個(gè)位置的徽標(biāo)等內(nèi)容。絕對(duì)定位有時(shí)以有限的方式使用，作為主要使用浮動(dòng)的整體布局的一部分。

布局策略

使用 CSS 的網(wǎng)頁(yè)布局與其說(shuō)是科學(xué)，不如說(shuō)是一門藝術(shù)。沒(méi)有用于標(biāo)記 HTML 頁(yè)面或創(chuàng)建 CSS 的公式。CSS 布局是您將通過(guò)經(jīng)驗(yàn)學(xué)習(xí)的東西，學(xué)習(xí)不同的 CSS 屬性，遵循教程并進(jìn)行大量練習(xí)。本節(jié)后面的內(nèi)容是一組指導(dǎo)方針，在您開始學(xué)習(xí)該主題時(shí)可能會(huì)很有用。

從您的內(nèi)容開始。設(shè)計(jì)從您的內(nèi)容(標(biāo)題、文本、鏈接、照片等)開始，而不是顏色、字體或圖標(biāo)。頁(yè)面信息應(yīng)該決定設(shè)計(jì)。例如，如果學(xué)生組織頁(yè)面的目標(biāo)是讓更多學(xué)生加入，您可以放一張成員正在做一些有趣或有趣的事情的大照片，以及他們的引言。然后你用風(fēng)格讓它們引人注目。

模擬你的設(shè)計(jì)。不要從代碼開始您的設(shè)計(jì)，而是從繪圖開始。使用繪圖程序(Paint、Photoshop、Illustrator 等)可以讓您自由探索不同的顏色、字體、圖像和定位，而無(wú)需編寫代碼。通過(guò)這種方式，您可以更快地嘗試多種選擇。如果您的頁(yè)面需要用戶界面元素，例如按鈕、選項(xiàng)卡等，您可以使用 Yahoo 的免費(fèi)模板工具包以及 Photoshop。

識(shí)別盒子。一旦您對(duì)模型感到滿意，您就可以開始考慮 HTML 結(jié)構(gòu)。基本上，您需要確定哪些元素看起來(lái)像單獨(dú)的框，因?yàn)樗鼈儽仨毼挥?HTML 中的容器標(biāo)簽中。

記住背景圖片。很多時(shí)候，您可以更輕松地放置帶有background-image 屬性的圖像而不是 標(biāo)簽。這是因?yàn)槟梢栽诖藞D像上放置其他信息。但是，您應(yīng)該知道背景圖像不會(huì)打印，因此，不要將重要信息(例如地圖)作為背景。

分層元素。像 Photoshop 這樣的工具使用圖層的概念將多個(gè)東西浮動(dòng)在彼此之上。要在網(wǎng)頁(yè)上做同樣的事情，有兩種選擇：使用該background-image屬性將文本放在圖像之上，或者使用該position屬性將圖像或圖標(biāo)放在文本之上。您不能使用float使內(nèi)容重疊。

不要忘記邊距和填充。通常，您可能不需要使用復(fù)雜的 CSS 進(jìn)行布局。很好地使用邊距和填充屬性可以讓你走得很遠(yuǎn)(尤其是與背景圖像屬性結(jié)合使用時(shí))。

基于浮動(dòng)的布局

在本節(jié)中，我們將通過(guò)不同的示例展示如何構(gòu)建基于浮動(dòng)的布局。此類布局利用該float 屬性將元素并排放置并創(chuàng)建列。您還可以使用浮動(dòng)來(lái)創(chuàng)建環(huán)繞效果。這是因?yàn)楦?dòng)元素已從文檔流中移除，并且在它向上移動(dòng)并環(huán)繞浮動(dòng)之后發(fā)生了什么。(注意：你的書對(duì)文檔的流程有非常詳細(xì)的描述。)

浮動(dòng)圖像

如您所知，圖像是內(nèi)聯(lián)元素。為了提醒您這一點(diǎn)，請(qǐng)查看此示例并調(diào)整瀏覽器頁(yè)面的大小以查看圖像會(huì)發(fā)生什么。您還可以使用 Chrome 的 Inspect Element 來(lái)注意嵌套在p.

現(xiàn)在，讓我們 在應(yīng)用以下樣式規(guī)則后 查看同一頁(yè)面：

通過(guò)以像素為單位指定寬度，使主體具有固定寬度。

通過(guò)指定它使身體居中margin: auto; 。

通過(guò)指定使圖像向右浮動(dòng)img { float: right; }。

請(qǐng)注意圖像現(xiàn)在如何嚴(yán)格位于文檔的右側(cè)，并且段落的文本環(huán)繞在它們周圍。為此唯一需要的步驟是最后一步，但其他步驟也很好。

浮動(dòng) DIV(或語(yǔ)義容器)

現(xiàn)在讓我們看看當(dāng)我們浮動(dòng)一個(gè)容器元素時(shí)會(huì)發(fā)生什么，例如 a div、figure、footer等。這是未設(shè)置樣式的頁(yè)面，我們將其img放入figure 容器中。請(qǐng)注意這次圖像不再是內(nèi)聯(lián)的。

如果我們現(xiàn)在將浮動(dòng)屬性應(yīng)用于figure, 元素，我們將獲得與之前相同的效果 ，不同之處在于 figure瀏覽器分配的邊距已經(jīng)有了一些默認(rèn)值。

該float屬性只接受三個(gè)值：left、right和none。最后一個(gè)值用于防止元素浮動(dòng)。(沒(méi)有屬性;我們?cè)诤凶幽Ｐ蚮loat: center的閱讀中討論了居中。)

現(xiàn)在我們了解了屬性 float，讓我們看看如何使用它來(lái)創(chuàng)建帶有列的布局。

兩列布局

為了有一個(gè)兩列布局，我們需要有兩個(gè)可以有意義地并排放置的容器;例如，一個(gè)section和一個(gè)aside。讓我們首先在饑餓游戲示例中添加一個(gè)aside元素 。內(nèi)容將是一個(gè)標(biāo)題和一個(gè)短行列表：

<aside> <h3>人物</h3> <ul> <li> Katniss Everdeen </li> <li> Peeta Melllark </li> <li> Gale Hawthorne </li> <li> Primrose Everdeen </li> <li>黑密斯·阿伯納西</li> </ul> </aside>

然后，我們對(duì)這個(gè)元素應(yīng)用一些最小的樣式，以便在左側(cè)浮動(dòng)，如下所示，得到這個(gè)新版本。

一邊{浮動(dòng)：左；
    邊框：1px黑色實(shí)心；
    填充：5px ；}

重要提示：每個(gè)浮動(dòng)容器元素的寬度和高度 取決于容器內(nèi)內(nèi)容(文本或圖像)的數(shù)量。這是收縮以適應(yīng) 模型。如果上面的列表有一些很長(zhǎng)的項(xiàng)目，以至于列表與頁(yè)面一樣寬，則該float屬性將不起作用。

正如您從下面的屏幕截圖中看到的那樣，aside可以根據(jù)邊距、邊框、填充和內(nèi)容大小的值計(jì)算框大小(例如寬度：185px = 0 + 1px + 5px + 173px + 5px + 1px + 0)。173px 來(lái)自標(biāo)題和列表中文本的寬度。同樣，如果您的浮動(dòng)元素中有一大段文本，它很可能與其容器一樣寬，并且浮動(dòng)將不起作用。

如果您希望列的大小是您想要的(例如，不是 185 像素的寬度，而是 200 像素)，您可以使用一個(gè)簡(jiǎn)單的公式進(jìn)行反向計(jì)算以找出內(nèi)容的寬度應(yīng)該是多少。例如，200px = 0 + 2*1px + 2*5px + X px。解決這個(gè)問(wèn)題，我們得到width=188px. 這意味著在我們的規(guī)則中，我們應(yīng)該設(shè)置width: 188px;, 以便在瀏覽器頁(yè)面上將列的實(shí)際大小設(shè)置為 200 像素。

可以對(duì)高度做同樣的事情，但這不是很有用，因?yàn)槿绻噜徚蝎@得更多內(nèi)容，我們將需要重新計(jì)算。

現(xiàn)在，為了實(shí)現(xiàn)我們的兩列效果，我們只需為非浮動(dòng)元素添加一個(gè)邊距。在這里，我們?yōu)樵摬糠痔砑右粋€(gè)邊距，以便旁邊浮動(dòng)。根據(jù)浮動(dòng)列是在左側(cè)還是右側(cè)，我們需要將margin-left或設(shè)置margin-right為略大于浮動(dòng)列寬度的值。由于旁邊是 185px 寬，210px 的邊距應(yīng)該看起來(lái)不錯(cuò)。因此，我們添加以下規(guī)則：

部分{
    邊距-左：210px ；} 

摘要：兩列布局

例如，將每一列包裝在容器中，aside 和section(或div帶有id屬性的 a)。

aside向左或向右浮動(dòng)一個(gè)容器(在我們的例子中為)。

為浮動(dòng)元素設(shè)置所需的寬度。

向固定元素添加邊距(左側(cè)或右側(cè)，與浮動(dòng)邊匹配)。

三欄布局

從兩列布局到三列布局是一個(gè)相當(dāng)簡(jiǎn)單的擴(kuò)展。您能想到您需要對(duì) HTML 和 CSS 代碼進(jìn)行哪些更改嗎?為了挑戰(zhàn)自己，現(xiàn)在停止閱讀并嘗試使用兩列布局中的代碼(從上面的鏈接獲取文件)。然后，檢查我們的解決方案。以下是我們執(zhí)行的步驟的摘要：

添加了一個(gè)新aside元素(在 之前section)。

aside為每個(gè)元素添加了一個(gè) ID 屬性。

在 CSS 代碼中使用這兩個(gè)新的 ID 作為選擇器(規(guī)則相同，除了float.

添加margin-right: 210px;到部分規(guī)則中，以便為新的浮動(dòng)元素留出空間。

重要提示：使用這種技術(shù)(稱為正邊距)時(shí)，浮動(dòng)元素需要放置在 HTML 文件中的主要內(nèi)容之前，否則將無(wú)法獲得預(yù)期的效果。

包含浮點(diǎn)數(shù)

當(dāng)另一個(gè)元素中包含的浮動(dòng)元素大于其容器時(shí)，會(huì)出現(xiàn)另一個(gè)問(wèn)題。當(dāng)容器具有背景顏色或邊框時(shí)，這一點(diǎn)變得很明顯。在我們正在進(jìn)行的饑餓游戲示例中，我們將元素的背景顏色更改section為橄欖色，因此現(xiàn)在您可以在下面的屏幕截圖中看到浮動(dòng)元素(圖形)已從其容器(部分)中取出。它一直在它的容器之外，但我們只是沒(méi)有注意到。

這個(gè)問(wèn)題有幾種解決方案，但我們將展示兩個(gè)最簡(jiǎn)單的。

在容器底部添加一個(gè)元素，以便使用 clear. 在我們使用 clear 的解決方案中，我們
在該部分的末尾添加了一個(gè)元素并為其添加了 CSS 規(guī)則br.clear {clear: both;}。

為容器元素使用專用的 CSS 屬性，overflow: hidden;. 這是再次使用溢出隱藏的解決方案。雖然這個(gè) CSS 屬性工作得很好，但它的名字可能會(huì)讓人困惑，因?yàn)樗男Ч皇请[藏溢出(突出的浮動(dòng)元素)，而是擴(kuò)大了包含元素，使浮動(dòng)元素不再突出。

在頁(yè)面上定位元素

在這些筆記的開頭，我們提到浮動(dòng)是設(shè)計(jì)布局時(shí)最常用的技術(shù)。但是，還有另一種技術(shù)，定位，它在特定情況下有很好的用途。

我們通過(guò)屬性來(lái)實(shí)現(xiàn)元素的定位position，它可以取這些值：

絕對(duì)

相對(duì)的

固定的

靜態(tài)(這是默認(rèn)值)

absolute和fixed的值在語(yǔ)法上非常相似(盡管它們會(huì)產(chǎn)生不同的效果)并且更容易理解。相對(duì)值有點(diǎn)棘手，因?yàn)樗暮x與我們?cè)谌粘ＵZ(yǔ)言中使用這個(gè)詞的方式不同。為了解釋這些值，我們將在下面展示每個(gè)值的示例。您應(yīng)該查看每個(gè)示例的 HTML 和 CSS 文件，以更好地了解發(fā)生了什么。

位置：絕對(duì)

我們可以使用此樣式將元素設(shè)置在頁(yè)面中的所需位置，方法是使用屬性left、right、top和額外指定水平和垂直位置bottom。這些屬性指定與某個(gè)參考容器的 (0,0) 坐標(biāo)的距離(以像素或其他一些單位為單位)。通常，引用容器是視口(瀏覽器查看區(qū)域的左上角)。

為了看到這一點(diǎn)，我們有一個(gè)饑餓游戲示例的修改版本，我們將嘗試將其定位figure到其他位置，如示例的這個(gè)樣式版本所示。這個(gè)效果是用這個(gè) CSS 代碼實(shí)現(xiàn)的：

數(shù)字 {
  位置：絕對(duì)；
  頂部：350 像素；
  左：500px；
  邊框：1px 黑色實(shí)心；
  填充：3px；
}

請(qǐng)注意圖形如何位于文本之上。這是因?yàn)橥ㄟ^(guò)成為 absolute，其他元素不再意識(shí)到它，因此它們無(wú)法圍繞它流動(dòng)。此外，嘗試調(diào)整瀏覽器窗口的大小。圖的位置不變。

位置：相對(duì)

假設(shè)我們想在圖形上放置一個(gè)標(biāo)題，坐在它的上面，而不是它的下面。在這種情況下，我們將需要使用相對(duì)位置。然而，要實(shí)現(xiàn)這一點(diǎn)，我們需要做兩件事：

聲明哪個(gè)是相對(duì)于該定位發(fā)生的元素。這就是我們?cè)谏弦还?jié)中提到的引用容器。

將我們要定位的元素聲明為絕對(duì)元素，并指定其相對(duì)于引用容器的坐標(biāo)。

這個(gè)新示例使用以下代碼在圖形上創(chuàng)建標(biāo)題：

圖{
  位置：相對(duì)；
  邊框：1px 黑色實(shí)心；
  填充：3px；
  寬度：400px；
}

figcaption {
  位置：絕對(duì)；
  底部：15px；
  左：4px；
  右：4px；
  顏色：黃色；
  背景顏色：黑色；
  不透明度：0.5；
  文本對(duì)齊：居中；
  字體粗細(xì)：200%；
  填充：5px；
}

因此， 中的bottom和left長(zhǎng)度f(wàn)igcaption是從 的左上角測(cè)量的figure，而不是從窗口測(cè)量的。

位置：固定

這種定位與絕對(duì)定位非常相似，不同之處在于元素始終保持在其位置，而頁(yè)面的其余部分則上下滾動(dòng)。您可以將其視為相對(duì)于屏幕的定位。它對(duì)于將導(dǎo)航欄或側(cè)邊欄固定在一個(gè)位置很有用。在我們的示例中查看aside 元素如何保持固定，代碼如下：

在旁邊 {
  位置：固定；
  頂部：80 像素；
  邊框：1px 黑色實(shí)心；
  填充：5px；
  寬度：188px；/* 這個(gè)值將確保側(cè)邊欄占據(jù) 200px */
}

以上就是關(guān)于“使用CSS網(wǎng)頁(yè)布局的詳細(xì)介紹”，如果大家想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的Java在線學(xué)習(xí)，里面的課程從入門到精通，很適合沒(méi)有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對(duì)大家能夠有所幫助哦。