佈局定位

1、佈局方式

1. 普通文檔流：

默認佈局方式，按照代碼書寫順序及標籤類型從上到下，從左到右依次顯示。

2. 浮動佈局：主要用於設置塊元素的水平排列。

2.1屬性：

float

2.2 取值：

可取 left 或 right，設置元素向左浮動或向右浮動

float:left/right;
clear:left/right/both

2.3 特色：

• 元素設置浮動會從原始位置脫流，向左或向右依次停靠在其餘元素邊緣，在文檔中再也不佔位

• 元素設置浮動，就具備塊元素的特徵，能夠手動調整寬高

• "文字環繞"：浮動元素遮擋正常元素的位置，沒法遮擋正常內容的顯示，內容圍繞在浮動元素周圍顯示

2.4常見問題：子元素所有設置浮動，致使父元素高度爲0，影響父元素背景色和背景圖片展現,影響頁面佈局

2.5解決：

• 對於內容固定的元素，若是子元素都浮動，能夠給父元素固定高度(例:導航欄)

• 在父元素的末尾添加空的塊元素。設置 clear:both; 清除浮動

• 爲父元素設置 overflow:hidden; 解決高度爲0

3. 定位佈局：結合偏移屬性調整元素的顯示位置

3.1屬性：

position

3.2取值：

可取relative（相對定位）/ absolute（絕對定位）/ fixed（固定定位）

postion:relative/absolute/fixed

3.3偏移屬性：

設置定位的元素可使用偏移屬性調整距離參照物的位置

top      距參照物的頂部
right    距參照物的右側
bottom   距參照物的底部
left     距參照物的左側

3.4分類：

1. relative 相對定位

元素設置相對定位,可參照元素在文檔中的原始位置進行偏移,不會脫離文檔流

2. absolute 絕對定位

絕對定位的元素參照離他最近的已經定位的祖先元素進行偏移,若是沒有,則參照窗口進行偏移
絕對定位的元素會脫流,在文檔中不佔位,能夠手動設置寬高

使用絕對定位 : 父元素設置相對定位,子元素絕對定位，參照已定位的父元素偏移

3.fixed 固定定位

•  參照窗口進行定位,不跟隨網頁滾動而滾動,好比導航條
•  脫離文檔流

3.5 堆疊次序：

元素髮生堆疊時可使用 z-index 屬性調整已定位元素的顯示位置，值越大元素越靠上：

• 屬性 : z-index

• 取值 : 無單位的數值,數值越大，越靠上

• 堆疊：

1. 定位元素與文檔中正常元素髮生堆疊，永遠是已定位元素在上

2. 同爲已定位元素髮生堆疊，按照 HTML 代碼的書寫順序，後來者居上

2、背景屬性

1.背景顏色：red爲顏色參數

background-color: red;

2. 背景圖片相關

2.1設置背景圖片

設置背景圖片，指定圖片路徑，若是路徑中出現中文或空格，須要加引號

background-image : url("路徑");

2.2 設置背景圖片的重複方式

默認背景圖片從元素的左上角顯示，若是圖片尺寸與元素尺寸不匹配時，會出現如下狀況：

1. 若是元素尺寸大於圖片尺寸，會自動重複平鋪，直至鋪滿整個元素

2. 若是元素尺寸小於圖片尺寸，圖片默認從元素左上角開始顯示，超出部分不可見

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值：

repeat  默認值，沿水平和垂直方向重複平鋪
repeat-x 沿X軸重複平鋪
repeat-y 沿Y軸重複平鋪
no-repeat 不重複平鋪

2.3 設置背景圖片的顯示位置：默認顯示在元素左上角

background-position:x y;

取值方式 ：

1. 像素值
    設置背景圖片的在元素座標系中的起點座標
2. 方位值
    水平：left/center/right
    垂直：top/center/bottom
    注：若是隻設置某一個方向的方位值，另一個方向默認爲center

精靈圖技術 ：爲了減小網絡請求，能夠將全部的小圖標拼接在一張圖片上，一次網絡請求所有獲得；藉助於background-position 進行背景圖片位置的調整，實現顯示不一樣的圖標

2.4 設置背景圖片的尺寸

background-size:width height;

取值方式 ：

1. 像素值
    1. 500px 500px; 同時指定寬高
    2. 500px;  指定寬度，高度自適應
2. 百分比
    百分比參照元素的尺寸進行計算
    1. 50% 50%; 根據元素寬高,分別計算圖片的寬高
    2. 50%; 根據元素寬度計算圖片寬高,圖片高度等比例縮放

3. 背景屬性簡寫

background:color url("") repeat position;

注意 ：若是須要同時設置以上屬性值，遵守相應順序書寫，background-size 單獨設置

3、文本屬性

1. 字體相關

1.1 設置字體大小

font-size:20px;

1.2 設置字體粗細程度

font-weight:normal;

取值 ：

1. normal（默認值）等價於400
2. bold   (加粗) 等價於700

1.3 設置斜體

font-style:italic;

1.4 設置字體名稱

font-family:Arial,"黑體","宋體"; 

取值 :

1，能夠指定多個字體名稱做爲備選字體，使用逗號隔開
2，若是字體名稱爲中文，或者名稱中出現了空格，必須使用引號

例 :

font-family:Arial;
font-family:"黑體","Microsoft YaHei",Arial;

1.5 字體屬性簡寫

font : style weight size family;

注意 :若是四個屬性值都必須設置，嚴格按照順序書，size family 是必填項

2. 文本樣式

2.1文本顏色

color:red;

2.2 文本裝飾線

text-decoration:none;

取值 :

underline 下劃線
overline 上劃線
line-through 刪除線
none 取消裝飾線

2.3 文本內容的水平對齊方式

text-align:center;

取值 :

left(默認值) 左對齊
center 居中對齊
right 右對齊

2.4 行高

line-height:30px;

使用 : 文本在當前行中永遠垂直居中，能夠藉助行高調整文本在元素中的垂直顯示位置

line-height = height 設置一行文本在元素中垂直居中

line-height > height 文本下移顯示

line-height < height 文本靠上顯示

特殊 : line-height能夠採用無單位的數值，表明當前字體大小的倍數,以此計算行高