網(wǎng)頁元素定位的設(shè)置

這一節(jié)中，我們將帶領(lǐng)大家來學(xué)習(xí)網(wǎng)頁設(shè)計中元素定位的設(shè)置。主要講解兩個知識點，一個是positon定位，一個是浮動定位。

在這一節(jié)中，理解的東西是重點，而且是難點。定位這個概念相對抽象，但在整個網(wǎng)頁排版布局中卻是十分重要的。然而，同學(xué)們有了本節(jié)慕課網(wǎng) WIKI 的講解，大可打消恐懼的心理。

一方面本節(jié)我們介紹的內(nèi)容并不多，并不會像傳統(tǒng)培訓(xùn)機構(gòu)一樣一次性填鴨式教學(xué)講授很多內(nèi)容，另一方面，老師在本節(jié)中也會為大家講述的特別清晰。在認(rèn)真研讀學(xué)習(xí)的基礎(chǔ)上，相信大家一定能在本篇 WIKI 的引導(dǎo)下充分掌握頁面中基礎(chǔ)的位置布局本領(lǐng)。下面就請大家跟隨老師的腳步一起來學(xué)習(xí)網(wǎng)頁元素定位的設(shè)置相關(guān)內(nèi)容吧！

1. 網(wǎng)頁的 position 定位

1.1 定位在網(wǎng)頁設(shè)計中的作用

眾所周知，現(xiàn)在的網(wǎng)頁中每個元素都是相對固定的，意思是每個網(wǎng)頁元素都有其相對其他元素較為固定的位置。從主觀的角度來思考，網(wǎng)頁中的定位應(yīng)該至少分為兩種：

• 一種是以固定不動的東西作為基準(zhǔn)去定位自己的位置；
• 一種應(yīng)該是以某個已有元素的位置去定位自己的位置。

那么，掌握了這兩種定位思路，大家就不難掌握今天的知識點了。首先，網(wǎng)頁定位。一個合理的定位幾乎決定了我們網(wǎng)頁的用戶查看網(wǎng)頁的整個觀感效果。因此，學(xué)好定位在網(wǎng)頁設(shè)計中是很重要的。

1.2 網(wǎng)頁中的 position

position，英文較好的同學(xué)們或許早已明白，它的中文譯為位置。在網(wǎng)頁設(shè)計中，它是很多元素都有的一個屬性，那么這個屬性有哪些可能的值？這一點我們要有個基本的認(rèn)知：

static

首先，我們來了解它的默認(rèn)值 static。static 是靜態(tài)的，靜止的意思。所有支持 position 屬性的 HTML 元素在一上來的屬性值都是這個值 static。它是一個默認(rèn)值，在網(wǎng)頁設(shè)計中可不是說這個元素的位置是靜止的，而是說明這個元素是沒有定位的。 元素會按照它不設(shè)置任何定位的時候的模樣展示。具體的模樣在這里不做詳細(xì)說明，后面我們會有更深入的課程講解。

absolute

其次，我們來看幾個position屬性常見的取值。第一個是 absolute ，它的意思是絕對定位，當(dāng)一個元素的 position 屬性的值為 absolute 的時候，意味著它是一個采用絕對定位的元素。 也就是我們本節(jié)1.1 中描述的第二種定位方式。大多數(shù)情況下，這種設(shè)置下元素的位置是通過上，下，左，右屬性進(jìn)行的定位的。

fixed

第二個常見的值就是 fixed ，當(dāng)元素的 position 屬性被賦予 fixed 的值后，元素和 absolute 一樣，也是一個絕對定位的元素。定位方式也完全一致，即通過上下左右來實現(xiàn)自己的定位。

但同學(xué)們肯定會有疑問：那么 absolute 和 fixed 兩種設(shè)置有什么區(qū)別呢。這里就要重點提一下：二者的區(qū)別是在定位的時候參照的東西不同。 absolute 定位的方式是相對于 static 定位以外的第一個父元素進(jìn)行定位的。而 fixed 指的是相對于瀏覽器窗口進(jìn)行的定位。但同學(xué)們?nèi)耘f不要忘了它們都是絕對定位的方式。

relative

第三個常見的值就是 relative ，這個是我們第一個見到的相對定位取值吧，也就是 1.1 中描述的第一種定位方式。這種定位的方式呢，往往是相對于正常位置去定位，也會用到上下左右來輔助定位。

好了，以上的介紹呢就是我們在這個小節(jié)中關(guān)于 position 定位的介紹。由于多數(shù)是給大家總結(jié)干貨，就少了些詳細(xì)的內(nèi)容，大家如果想今后學(xué)習(xí)更詳細(xì)的內(nèi)容，請大家去相關(guān)標(biāo)準(zhǔn)的官網(wǎng)去下載相應(yīng)的文檔，那里面會有最全面，最標(biāo)準(zhǔn)的介紹。同時在這里，老師也要提醒大家，官方文檔固然官方，但畢竟學(xué)習(xí)的出，遠(yuǎn)大于學(xué)習(xí)的入，大家做出來的樣式才算大家所學(xué)，文檔上的知識沒有必要逼迫自己填鴨式全部記住，也不可能記住。把文檔當(dāng)工具，才是學(xué)習(xí)這一門學(xué)問的正?，F(xiàn)象。

2. 設(shè)置浮動定位

2.1 定位方式的分類

剛剛說到了定位方式，其實常見的定位體系大致上只有三種：

• 第一種是常規(guī)的根據(jù)文檔流進(jìn)行元素的排布定位，我們稱之為流式定位；

• 第二種是絕對定位，就是我們上面提到的某些定位方式；

• 第三種定位方式，就是我們這回要講解的浮動定位。

在 HTML中，浮動定位是使用一個名為 float 的屬性來約束元素的位置，下面我們就來仔細(xì)討論學(xué)習(xí)一下這個 float。

2.2 float 的取值

floa t的取值有三種：左浮動，右浮動，和不浮動。原則上講，任何元素都可以浮動，比如 DIV，比如ul 等。這里需要強調(diào)一點：凡是被聲明為 float 的元素都會自動地被設(shè)置為塊元素。

Tips：塊元素是一種可以設(shè)置寬高，設(shè)置內(nèi)外邊距的元素。

2.3 清除浮動

有的時候網(wǎng)頁發(fā)生一些布局錯誤的時候，浮動的效果并非我們想要，這個時候就需要清除浮動。那么常見的清除浮動方式有哪些呢？

首先是：不清除浮動 clear：none 。再有就是清除左/右浮動其中之一 cleat ： left/right 。最后就是清除所有的浮動 clear：both 這樣大家就基本掌握了所有清除浮動的方式。

3.本節(jié)小結(jié)

通過本節(jié)知識點的學(xué)習(xí)，我們可以清晰地了解到網(wǎng)頁中設(shè)置布局位置的重要性，學(xué)會了相對定位和絕對定位當(dāng)中的一些常識，學(xué)習(xí) position 屬性在網(wǎng)頁設(shè)計中的重要性。

在第二個較大的知識點中，我們還學(xué)習(xí)了浮動定位，了解了元素原來是可以浮動的，這個需要我們具備一定的想象能力，也需要大家實際的去電腦上敲擊一下相關(guān)的代碼。

由于 Dreamweaver CC 2018的設(shè)置元素屬性的基本操作大家都已經(jīng)學(xué)習(xí)過不止一遍了，因此，這一次的學(xué)習(xí)就以知識點的講解為主，深入淺出，希望大家能在文檔之外的學(xué)習(xí)生活中多多練習(xí)。

本節(jié)的重點是： position 的幾種取值以及它們對應(yīng)的效果含義。
本節(jié)的難點是： 對浮動定位的理解。