網頁布局基礎簡介

css盒子模型的4個屬性：

border（邊框）、margin（外邊距）、padding（內邊距）、content（內容）。

css布局模型主要有3種：流行模型、浮動模型、層模型。

換言之，css中3種定位機制：標準文件流、浮動、絕對定位。

一、標準文件流

normal flow，這是預設的網頁布局模式。

如何實現網頁的自動居中：

body

之所以設定左右的外邊距為auto，是因為這樣系統會根據瀏覽器的寬度自動設定兩邊的外邊距。而這個外邊距的值=（瀏覽器的寬度-外包含層的寬度）/2.

注意：如果想讓頁面自動居中，當設定margin屬性為auto的時候，不能再設定浮動或絕對定位屬性。

二、浮動布局

float，主要用於橫向多列。

3個屬性值：left（左浮動）、right（右浮動）、none（不浮動）

當元素設定浮動屬性後，會對緊鄰後面的元素產生影響。

如何清除浮動，常用方法：

1、clear屬性，clear:both 或 clear:left 或 clear:right

2、設定了寬度值，那麼可以用overflow屬性，overflow:hidden

三、絕對定位

position，也就是所謂的層模型。

4個屬性值：static（靜態定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位）。

注意：1、relative相對定位的元素仍處於標準文件流中，而absolute絕對定位的元素完全脫離了標準文件流。

2、給absolute絕對定位的元素設定偏移量的時候，他的偏移參照基準分2種情況：有已定位的祖先元素，則以最近的已定位祖先元素為偏移參照基準；無已定位的祖先元素，則以為偏移參照基準。

css盒子模型的4個屬性 border 邊框 margin 外邊距 padding 內邊距 content 內容 css布局模型主要有3種流行模型浮動模型層模型。換言之，css中3種定位機制標準文件流浮動絕對定位。一標準文件流 normal flow，這是預設的網頁布局模式。如何實現網...

網頁製作的基礎，在w3c盛行的今天 div css 布局網頁布局分為流式布局浮動布局絕對定位布局涉及標準文件流盒子模型 float屬性 position屬性 1.自動居中列布局盒子模型的使用方法 2.浮動布局 float屬性來實現上中下布局和橫向兩列甚至多列布局，解決浮動影響的常用方...

由全球資訊網聯盟指定的一系列標準，包括機構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript w3c標準倡導結構樣式行為分離。css中存在3中定位機制 1 標準文件流 normal flow 特點從上到下，從左到右，輸出文件內容由塊級元素和行級元...

網頁布局基礎 簡介