布局方式

　　1 布局：設置元素在網頁中的排列方式及顯示效果

　　2 分類：　　

　　　　1 標準流布局（文檔流，普通流，靜態流）

　　　　　　是默認的布局方式

　　　　　　特點：將元素按照書寫順序及元素類型，從上至下，從左至右排列

　　　　2 浮動布局

　　　　　　設置元素浮動　

　　　　　　　　屬性：float

　　　　　　　　取值：left / right / none (默認值)

　　　　　　浮動元素的特點：

　　　　　　　1 元素設置浮動（left / right），會脫離文檔流，在文檔中不再占位，後面正常的元素會向前占位，浮動元素會“漂浮在文檔流上方”

　　　　　　　2 元素設置浮動，會從它當前所在文檔中的位置脫流向左或向右浮動。

　　　　　　　3 多個元素同時左浮或右浮，浮動元素會依次停靠在前一個浮動元素的邊緣，中間沒有縫隙

　　　　　　　4 浮動元素會在父元素的尺寸範圍內浮動，多個浮動元素無法並排顯示時，會自動換行，停靠在其他浮動元素邊緣

　　　　　　　5 任何元素只要設置浮動，就具有塊元素的特征，可以手動調整寬高

　　　　3 浮動引發的特殊效果：

　　　　　　文字環繞效果：

　　　　　　　　浮動元素脫流，在文檔中不占位，後面正常元素會向前占位，可能被浮動元素遮擋，但是浮動元素只會遮擋正常元素尺寸區域，

　　　　　　　　不會遮擋正常文本內容，文本會圍繞在浮動元素周圍顯示。

　　　　4 元素浮動引起的問題：

　　　　　　子元素如果全部設置浮動，在文檔中不占位，父元素高度為0：

　　　　　　　　1 父元素的背景圖片和背景顏色無法顯示

　　　　　　　　2 父元素後面的正常元素會上移，影響布局

　　　　　　解決：

　　　　　　　　1 為父元素指定高度（常見寫法）

　　　　　　　　2 設置父元素 overflow:hidden;

　　　　　　　　3 清除浮動的影響：

　　　　　　　　　　屬性：clear

　　　　　　　　　　取值：left / right / both

　　　　　　　　　　使用：為正常元素添加clear屬性，清除浮動元素帶來的影響

　　　　　　　　　　　　left：表示正常元素左邊不允許出現浮動元素，

　　　　　　　　　　　　right :正常元素不受右浮元素影響

　　　　　　　　　　　　both:正常元素不受浮動元素影響

　　　　　　　　　　解決父元素高度為0的問題：

　　　　　　　　　　　1　為父元素末尾添加空的塊元素

　　　　　　　　　　　2 為空的塊元素設置clear:both;　　

　 3 定位布局

　　　1 定位布局：通過調整元素的位置，實現網頁布局

　　　2 屬性：position

　　　　 取值：

　　　　　　1 static:默認值，使用文檔流布局　　

　　　　　　2 relative:相對定位

　　　　　　3 absolute:絕對定位

　　　　　　4 fixed:固定定位

　　　　註意：只有元素設置position 屬性為 relative / absolute / fixed 三者之一，才認為元素是“已定位元素”

　　　3 偏移屬性

　　　　　使用 top / bottom /left / right 偏移屬性來調整已定位元素的位置

　　　　　　1 top:取像素值，可正可負， 正值表示元素向下移動，負值向上

　　　　　　2 bottom: 正值表示向上移動，負值向下

　　　　　　3 left:正值表示元素向右移動，負值向左

　　　　　　4 right:正值表示元素向左，負值向右

　　　4 分類：

　　　　　1 相對定位 position :relative

　　　　　　　元素設置相對定位之後，可以使用偏移屬性調整元素位置，

　　　　　　　相對定位的元素是參照元素在文檔中的原始位置進行偏移

　　　　　　　特點：

　　　　　　　　相對定位的元素不會脫離文檔流，在文檔中始終保留它的原始位置，

　　　　　2 絕對定位 position;absolute:

　　　　　 　　絕對定位的元素會脫離文檔流，類似於浮動，絕對定位的元素參照一個離他最近的已定位的祖先元素

　　　　　　　會參照瀏覽器窗口的(0,0)點偏移

　　　　　　　使用：

　　　　　　　　采用“父相子絕” 的方式實現元素絕對定位。父元素采用相對定位，子元素使用絕對定位，實現子元素參照父元素的（0，0）點偏移

　　　　　3 固定定位 position:fixed:

　　　　　　　特點：

　　　　　　　　1 固定定位的元素，永遠都參照瀏覽器窗口進行偏移

　　　　　　　　2 固定定位的元素，會被定位在窗口的某個位置，不會跟隨頁面滾動而滾動

　　5 調整已定位元素的堆疊次序

　　　　屬性：z-index

　　　　取值:無單位的數值，默認為0，數值越大，元素越靠上顯示

　　　　註意：

　　　　　1 z-index 屬性只能在已定位的元素中使用

　　　　　2 兄弟元素之間可以通過 z-index 數值的大小調整堆疊次序

　　　　　3 父子元素之間，永遠是子元素在上，無法通過z-index 調整父子元素的堆疊次序

　　　　　4 如果兄弟元素的z-index 取值相同，後來者居上

2 元素顯示效果

　　1 display

　　2 visibility

　　3 透明度設置

　　　　1 屬性：opacity 設置元素透明度

　　　　 2 取值：0 （透明）- 1 （不透明）

　　　　 3 註意：

　　　　　　1 元素使用opacity設置半透明，所有顯示的內容（背景顏色，文本顏色等） 都會呈現半透明效果

　　　　　　2 opacity 是對元素整體透明度的設置，包含元素自身和內部的子元素

　　　　　　3 子元素同時設置透明度，最終的透明度值是在父元素opacity取值的基礎上再次進行透明度設置

　　　　　　　　父元素中 opacity: .5;

　　　　　　　　子元素 opacity: .5 ;

　　　　　　　　子元素最終的透明度為 0.5*0.5

　　4 行內塊元素的垂直對齊方式

　　　　行內塊元素：img input button

　　　　　　屬性：top / middle / bottom

　　　　　　作用：調整行內塊元素左右元素與其自身的垂直對齊方式

　　5 設置鼠標形狀

　　　　屬性：cursor

　　　　取值：

　　　　　　1 default 默認值

　　　　　　2 pointer 鼠標在元素上展現為手指的樣式

　　　　　　3 text 鼠標展示為 “Ｉ” ，表示普通文本 info的意思　

　　　　　　4 crasshair 鼠標展示為 “+”

3 列表相關屬性

　　列表自帶內外邊距和項目符號

　　1 list-style-type

　　　　設置項目符號

　　　　取值：

　　　　　　1 none(取消項目符號，最常用)

　　　　　　2 disc 實心圓點

　　　　　　3 circle 空心圓點

　　　　　　4 square 實心方塊

　　　　　　5 ...

　　2 list-style-image

　　　　指定圖片作為項目符號

　　　　取值：url()

　　3 liist-stype-position

　　　　指定項目符號的顯示位置

　　　　默認項目符號顯示在內容外部，在左邊的padding中展現

　　　　取值：

　　　　　　1 outside 默認值

　　　　　　2 inside 設置項目符號顯示在內容區域

　　4 屬性簡寫：

　　　 屬性：　list-stype

　　　　 取值：type / image position

　　　　 常用：

　　　　　　list-style:none;

　　　　　　取消項目符號

css 布局方式