HTML+CSS基礎

HTML+CSS基礎

在CSS中，html中的標籤元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

、

、

...

、

、

、

、、

、

、 、

、

、

、、、
、、常用的內聯塊狀元素有：、

1、的一行開始，其後的元素也另起一行。 （真霸道，一個區塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素特徵：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設定；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

inline-block 元素特徵：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

CSS包含3種基本的版面模型，以英文概括為：Flow、Layer 和 Float。

在網頁中，元素有三種版面模型：

1、流動模型（Flow）

2、浮動模型(Float)

3、層模型（Layer）

先來說一說流動模型，流動（Flow）是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。

流動佈局模型具有2個比較典型的特徵：


第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。

第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。


層佈局模型就像是圖像軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上局部使用層佈局還是有其方便之處的。

如何讓html元素在網頁中精確定位，就像圖像軟體PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。 CSS定義了一組定位（positioning）屬性來支援層佈局模型。

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)


3、固定定位(position: fixed)

層模型－絕對定位：層模型－絕對定位：

如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含區塊進行絕對定位。如果不存在這樣的包含區塊，則相對於body元素，即相對於瀏覽器視窗。

層模型－相對定位：

如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它透過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是先按static(float)方式產生一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性決定，偏移前的位置保留不動。

側模型－固定定位：


fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（螢幕內的網頁視窗）本身。由於視圖本身是固定的，它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文件流影響，這與background-attachment:fixed;屬性功能相同。


不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

加入 table 標籤

設定 display: inline 方法：與第一種類似，顯示為類型行內元素，進行不定寬元素的屬性設定

設定 position:relative 和left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的

父元素高度確定的單行文本的垂直居中的方法是透過設定父元素的 height 和 line-height 高度一致來實現的。 (height: 此元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。在 chrome、firefox 及 IE8 以上的瀏覽器下可以設定區塊級元素的display 為 table-cell（設定為表格單元顯示），啟動 vertical-align 屬性，但注意 IE6、7 並不支援這個樣式, 相容性比較差。