CSS+DIV布局應用，cssdiv布局

CSS+DIV布局應用，cssdiv布局
Div+css布局應用一、html元素分類2.1、頂級元素（Top-level element）

定義

組成html頁面最頂級標籤

特點

1、 不可設定寬高；

2、 必須在文檔流中處於最進階位置；

3、 包含所有區塊層級元素及內嵌元素，不可被包含；

常見元素

html

body

frameset

2.2、區塊層級元素（Block-level element）

定義

以塊顯示的元素，常用於排版，預設情況下每一個區塊層級元素會換行顯示。

特點

1、每一個區塊層級元素總是在新行上開始；

2、高度，行高以及外邊距和內邊距都可控制；

3、寬度預設是它的容器的100%，除非設定一個寬度；

4、它可以容納內嵌元素和其他塊元素；

常見元素

address - 地址

blockquote - 區塊引述

center - 舉中對齊塊 （html5取消了該標籤）

div - 常用塊級容易，也是css layout的主要標籤

dl - 定義列表

fieldset - form控制組

form - 互動表單

h1 - 大標題

h2 - 副標題

h3 - 3級標題

h4 - 4級標題

h5 - 5級標題

h6 - 6級標題

hr - 水平分隔線

isindex - input prompt

menu - 菜單列表

noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容）

noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）

ol - 排序表單

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表（無序列表）

address - 地址

2.3、內嵌元素（Inline element ）

定義

內嵌元素、行內元素，預設情況下一個或者多個內嵌元素會一行顯示。

特點

1、內嵌元素之間會在同一行顯示；

2、設定寬度width 無效，寬度取決於元素中文字或圖片的寬度；

3、設定高度height無效，高度只能通過line-height設定；

4、設定外邊距margin 只有左右margin有效，上下無效；

5、設定外邊距padding只有左右padding有效，上下無效；

6、只能容納文本或者其他內嵌元素；

常見元素

a - 錨點

abbr - 縮寫

acronym - 首字

b - 粗體(不推薦)

bdo - bidi override

big - 大字型

br - 換行

cite - 引用

code - 電腦代碼(在引用源碼的時候需要)

dfn - 定義欄位

em - 強調

font - 字型設定(不推薦) （html5取消了該標籤）

i - 斜體

img - 圖片

input - 輸入框

kbd - 定義鍵盤文本

label - 表格標籤

q - 短引用

s - 中劃線(不推薦)

samp - 定義範例電腦代碼

select - 項目選擇

small - 小字型文本

span - 常用內聯容器，定義文本內區塊

strike - 中劃線

strong - 粗體強調

sub - 下標

sup - 上標

textarea - 多行文本輸入框

tt - 電傳文本

u - 底線

var - 定義變數

二、重點布局css屬性介紹2.1、定位（position）2.1.1、預設值-static

預設值，沒有定位，即正常位置，元素出現在正常的HTML流中。當一個div為無定位狀態時， top, bottom, left, right 或者 z-index 聲明失效。(相對定位demo1)

2.1.2、相對定位-relative

定義

產生相對定位的元素，相對於其正常位置、結合TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）進行定位。

特點

1、relative保持對象所在文檔流中的位置，也就是說它具有和static相同的呈現方式，它同樣佔有在文檔流中的固定位置，後面的對象不會侵佔或覆蓋；

2、定位參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位；

2.1.3、絕對位置-absolute

定義

絕對位置，使元素脫離文檔流位置，結合TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）進行定位。

特點

1、absolute不保持對象所在文檔流中的位置，它不佔有在文檔流中的固定位置，後面的對象會侵佔或覆蓋；

2、如果父級（無限）沒有設定position屬性，那麼當前的absolute則結合TRBL屬性以瀏覽器左上方為原始點進行定位。如果父級（無限）設定position屬性，那麼當前的absolute則結合TRBL屬性以父級（最近）的左上方為原始點進行定位；

2.1.4、固定定位-fixed

定義

固定定位，使元素脫離文檔流位置，結合TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）根據瀏覽器位置進行定位。

特點

當一個層定義了fixed之後，則這個層總是根據瀏覽器的視窗結合TRBL屬性來進行元素的定位，相對於瀏覽器來自動調整該層的位置。

2.1.5、div層-z-index

定義

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

特點

1、z-index只能在position屬性值為relative或absolute或fixed的元素上有效；

2、同級且position屬性值均為relative的元素無法比較z-index；

3、z-index值只決定同一父元素中的同級子項目的堆疊順序，父元素的z-index值（如果有）為子項目定義了堆疊順序（css版堆疊“拼爹”）；

4、向上追溯找不到含有z-index值的父元素的情況下，則可以視為自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值，決定其堆疊順序；

5、同級元素的z-index值如果相同，則堆疊順序由元素在文檔中的先後位置決定，後出現的會在上面；

2.2、浮動（float）2.2.1、定義

float 屬性定義元素在哪個方向浮動。在 CSS 中，任何元素都可以浮動。浮動元素會產生一個塊級框，而不論它本身是何種元素。

假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

2.2.2、特點

請看，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣。

left

在左側不允許浮動元素。

right

在右側不允許浮動元素。

both

在左右兩側均不允許浮動元素。

none

預設值。允許浮動元素出現在兩側。

inherit

規定應該從父元素繼承 clear 屬性的值。

特點

假設希望讓一個圖片浮動到文字區塊的左邊，並且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不佔據空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear。

.news {

  background-color: gray;

  border: solid 1px black;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

.clear {

  clear: both;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

這樣可以實現我們希望的效果，但是需要添加多餘的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。

因此，針對這一問題，推薦使用以下解決方案，那就是對容器 div 進行浮動。

.news {

  background-color: gray;

  border: solid 1px black;

  float: left;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

2.3、外邊距、內邊距（margin & padding）2.3.1、外邊距-margin

定義

邊界，元素周圍產生額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的地區。——CSS權威指南

值

描述

none

定義無邊框。

hidden

與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。

dotted

定義點狀邊框。在大多數瀏覽器中呈現為實線。

dashed

定義虛線。在大多數瀏覽器中呈現為實線。

solid

定義實線。

double

定義雙線。雙線的寬度等於 border-width 的值。

groove

定義 3D 凹槽邊框。其效果取決於 border-color 的值。

ridge

定義 3D 壟狀邊框。其效果取決於 border-color 的值。

inset

定義 3D inset 邊框。其效果取決於 border-color 的值。

outset

定義 3D outset 邊框。其效果取決於 border-color 的值。

inherit

規定應該從父元素繼承邊框樣式。

Border-style 支援省略式寫法，如下：

例子 1

border-style: dotted solid double dashed; 

· 上邊框是點狀

· 右邊框是實線

· 下邊框是雙線

· 左邊框是虛線

例子 2

border-style: dotted solid double;

· 上邊框是點狀

· 右邊框和左邊框是實線

· 下邊框是雙線

例子 3

border-style: dotted solid;

· 上邊框和下邊框是點狀

· 右邊框和左邊框是實線

例子 4

border-style: dotted;

· 所有 4個邊框都是點狀

除了省略式寫法，必要時還可以進行單邊定義，如：

border-top-style：……

border-right-style：……

border-bottom-style：……

border-left-style：……

2.4.3、寬度-border-width

border-width 簡寫屬性為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。只有當邊框樣式不是 none 時才起作用。如果邊框樣式是 none，邊框寬度實際上會重設為 0。不允許指定負長度值。

CSS 的border-width屬性定義了幾種樣式，見下表。

值	描述
thin	定義細的邊框。
medium	預設。定義中等的邊框。
thick	定義粗的邊框。
length	允許您自訂邊框的寬度。

與border-style同理，border-width也支援省略式寫法：

例子 1

border-width: thin medium thick 10px;

· 上邊框是細邊框

· 右邊框是中等邊框

· 下邊框是粗邊框

· 左邊框是 10px 寬的邊框

例子 2

border-width: thin medium thick;

· 上邊框是 10px

· 右邊框和左邊框是中等邊框

· 下邊框是粗邊框

例子 3

border-width: thin medium;

· 上邊框和下邊框是細邊框

· 右邊框和左邊框是中等邊框

例子 4

border-width: thin;

· 所有 4 個邊框都是細邊框

同樣地，除了省略式寫法，也可以通過下列屬性分別設定邊框各邊的寬度：

border-top-width: ……

border-right-width: ……

border-bottom-width: ……

border-left-width: ……

2.4.4、顏色-border-color

border-color 屬性設定四條邊框的顏色。此屬性可設定 1 到 4 種顏色。

border-color 屬性是一個簡寫屬性，可設定一個元素的所有邊框中可見部分的顏色，或者為4個邊分別設定不同的顏色。

CSS 的border-color屬性支援下表幾種顏色寫法：

值	描述
color_name	規定顏色值為顏色名稱的邊框顏色（比如 red）。
hex_number	規定顏色值為十六進位值的邊框顏色（比如 #ff0000）。
rgb_number	規定顏色值為 rgb 代碼的邊框顏色（比如 rgb(255,0,0)）。
transparent	預設值。邊框顏色為透明。

省略式寫法

例子 1

border-color:red green blue pink;

· 上邊框是紅色

· 右邊框是綠色

· 下邊框是藍色

· 左邊框是粉色

例子 2

border-color: red green blue;

· 上邊框是紅色

· 右邊框和左邊框是綠色

· 下邊框是藍色

例子 3

border-color: red green;

· 上邊框和下邊框是紅色

· 右邊框和左邊框是綠色

例子 4

border-color: red;

· 所有 4 個邊框都是紅色

還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：

border-top-color: ……

border-right-color: ……

border-bottom-color: ……

border-left-color: ……