如何建立自己的網站?我們都知道網頁佈局的覈心是使用CSS來放置方框。我們也知道盒子模型特別重要。它與網頁的美有關。圖片的大小和文字的大小都需要盒子模型的佈局,你知道如何將這些盒子模型正確且定期地放在我們的網站上嗎?請看下麵幾頁,製作一張個人照片

如前所述,有些標記是塊級元素,將佔用一行,而有些標記是行內元素。它可以連續顯示三個。但有時我們只想讓多個盒子(DIV)水准排列成一行,或者如何實現盒子的左右對齊?我該怎麼辦?

雖然我們已經提到了inline塊,但是它有自己的缺點

1它可以一行顯示多個元素,但中間會有空白,不能滿足上面第一個問題。

2它無法實現上面的第二個問題,盒子左右對齊

準備三個盒子,把它們排成一排

每個框的中間有一個默認的間隙

我們不知道默認空白的大小,也無法擺脫它,但我們網站設計草稿中的空白是精確量測的,而不是默認空白

比如我們看百度圖片網頁時,每個圖片的大小都是一樣的,圖片擺放雜亂無章,但是默認的空白空白會影響美觀,甚至會使框模樣式混亂

這是百度圖片的位置

此時,我們應該知道CSS提供了三種機制來設定框的位置,即正常流(標準流)、浮動和定位

1普通流量(標準流量)

-塊級元素佔據一行,並按從上到下的順序排列。(以前寫過塊元素和行內元素,行內塊元素的顯示方式是公共流)

2浮動

-讓框從公共流浮動,主要功能是使多個塊級框顯示一行。

三。定位

-將框定位在瀏覽器的某個位置——CSS不能不定位,尤其是以後使用JS特效。

什麼是浮動的?

因為我們的頁面不需要流式佈局,所以我們不需要完成頁面的標準佈局。

Element floating表示具有floating内容的元素將:

1脫離標準公共流控制

2移動到指定位置。

浮動的作用

1使多個盒(DIV)水准排列成一行,使浮動成為佈局的重要手段。

2這個盒子可以左右對齊

在CSS中,通過定義float内容的中文發音“float”可以找到選中的框{float:left(right none)}浮動:左浮動依次左轉,浮動:右到再次浮起,沒有意味著不浮