網頁元素定位的設置

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

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

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

1. 網頁的 position 定位

1.1 定位在網頁設計中的作用

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

• 一種是以固定不動的東西作為基準去定位自己的位置；
• 一種應該是以某個已有元素的位置去定位自己的位置。

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

1.2 網頁中的 position

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

static

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

absolute

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

fixed

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

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

relative

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

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

2. 設置浮動定位

2.1 定位方式的分類

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

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

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

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

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

2.2 float 的取值

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

Tips：塊元素是一種可以設置寬高，設置內外邊距的元素。

2.3 清除浮動

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

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

3.本節(jié)小結

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

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

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

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