浮動與定位

block元素的特點

1.總在新行在開始

2.高行高外邊距內邊距都可以控制

3.寬度預設是它的容器的100%，除非設定乙個寬度

4.它可以容納內聯元素和其他塊元素

inline元素的特點

1.和其他元素都在一行上

2.高行高外邊距內邊距都不可改變

3.寬度由內容決定且不可改變

3.內聯元素只能容納文字和其他內聯元素

常見塊級元素

div dl定義列表 form表單 h1標題 hr 水平分割線 ol有序列表 ul無序列表

p段落 pre格式化文字 table**

常見內聯元素

a錨點 br換行 img input輸入框 label**標籤 span內聯容器

textarea多行文字輸入框

css 定位機制

css 有三種基本的定位機制：普通流、浮動和絕對定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (x)html 中的位置決定。

塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（line box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。如果包含框太窄，無法容納水平排列的浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。

clear清理屬性的值可以是 left、right、both 或 none 可以清除浮動帶來的影響

浮動可能出現的問題

由於浮動脫離了文件流，包圍元素在視覺上沒有包圍浮動元素，所以我們要通過clear來解決這個問題，若沒有現有的元素可以清理，那麼可以在需要的地方給乙個空div並清理他，當然我們也可以對包圍元素進行浮動，但是對下乙個元素，浮動依舊對其有影響，所以對這些浮動進行清理，有助於減少或消除不必要的標記

相對定位：position：relative；

相對於元素原位置進行移動，無論是否移動，元素都將佔據原來的空間，所以移動元素會導致他覆蓋其他框

絕對定位：posoition：absolute；

絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於最初的包含塊。

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框

絕對定位的框跟文件流無關，可以設定z-index來控制元素的層級

position：fixed

生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位

元素的位置通過left top right bottom 設定