1 浮動定位
1、普通流定位
普通流，由稱為文件流
塊級元素：從上到下乙個乙個的排列
行內元素：一行內從左到右的排列
2、浮動定位
2.1、什麼是浮動定位
將元素排列在普通流之外，即脫離文件流
浮動元素不會佔據頁面空間
浮動元素會放置在「包含框」的左邊或右邊
浮動元素依舊位於包含框之內
浮動元素可以向左或向右浮動，知道碰見包含框的邊緣或另乙個已浮動的元素框為止
2.2、特點
1、浮動元素邊緣不會超過器父元素的邊緣
2、浮動元素不會重疊
3、浮動知道左右浮動，不會上下浮動
注意：非塊級元素浮動的話， 將會變成塊級元素，允許修改width和height
2.3、處理問題
1、讓塊級元素在同一行內顯示
2、修改行內元素的width和height
2.4、浮動屬性
屬性：float
取值：none
left
right
清除浮動所帶來的影響：
屬性：clear
取值：left
right
both
2.5、子級元素的浮動，偽複層元素所帶來的影響
如果乙個元素的所有子級內容都是浮動的，那麼他的高度就會變成0
解決方案
1、設定父容器高度
2、設定父元素的overflow：hidden；
3、在父元素中，增加乙個空元素，新增clear：both；
2、顯示方式
2.1、display
none：生成元素沒有框，不佔據頁面空間，隱藏
block：按塊級顯示
inline：按行內方式顯示
inline-block：行內快，所有的元素在一行內顯示，允許修改width和height
使用場合：
1、控制元素的顯示與隱藏
隱藏：display：none
顯示：塊級：display：block；
行內：display：inline；
2、將行內元素變成塊級或行內塊
目的：修改行內元素的寬和高
2、顯示效果
2.1、visibility
可見性取值：
visible：預設的，可見的
hidden：元素不可見，佔據頁面空間
問題：visibility：hidden 佔據頁面空間與display：none的區別 不佔據頁面空間
2.2、opacity
透明度取值：0-1
opacity：0.5；
3、vertical-align
垂直方向對齊
tdimg
取值：baseline：預設，基線對齊
top：頂部對齊
bottom：底部對齊
middle：居中對齊
放在img上，控制的是img左右兩端文字的垂直對齊方式
4、游標
改變滑鼠的顯示效果
屬性：cursor
取值：default
pointer：小手
crosshair：+
text：i
wait：等待
3、相對定位
3.1、什麼是相對定位
元素框會相對與他原來的位置偏移某個距離
3.2、如何用
position：relative
left：尺寸
right：尺寸
3.3、什麼時候用
元素本身位置的微調
配合絕對定位使用
4、絕對定位
4.1、定義：脫離文件流 不佔據頁面空間
4.2、初始位置
相對與最近的已經定位的元素 那麼參考位置相對於body進行定位
4.3、如何使用
position：absolute；
4.4、使用場合
彈出選單
浮動float，定位position理解
浮動，定位可以實現網頁的排版 float屬性總結 使用場景一 實現網頁中併排布局 特點 實現左右併排時 1 當父元素足夠寬度足夠時，則依次布局 2 浮動的元素佔據空間的寬度就是內容的寬度 缺點 影響 父元素高度塌陷 原因 子元素 清除浮動方法 1 可以增加父元素的高度 2 可以增加乙個空的div，然...
深入理解浮動定位 float
css網頁布局有兩種方式 一種是浮動式布局 另外一種是定位布局。這兩種方式的核心都脫離於文件流的控制。前提 文件流 document flow 對於乙個xhtml網頁，body元素下的任意元素，根據其前後順序，組成了乙個個上下關係，簡單說這就是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置...
理解CSS浮動float 定位position
一 浮動float i 定義及規則 float預設為none,對應標準流的情況。當float left 時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。ii 演示規則 準備 xml html code複製內容到剪貼簿 wxdwhjv 1 中間給 f...