標籤:位移 停止 特殊 位移量 pos 實現 改變 預設 內聯
浮動
1、什麼定位
元素該出現的位置
分為以下幾類:
普通流定位(文檔流定位)
浮動定位
相對定位
絕對位置
固定定位
2、普通流定位
頁面預設的定位方式
區塊層級元素:從上到下顯示
行內元素:從左至右顯示
3、浮動定位
1、什麼是浮動定位
元素會脫離預設文件流,在頁面上不會佔據空間
浮動定位的元素會放置在包含框的左邊或者右邊
浮動的元素依然在包含框內
當浮動元素碰到其他浮動元素時,就會停止浮動
2、浮動定位解決的問題
實現特殊的定位方式,比如:讓多個區塊層級元素在同一行內顯示
3、屬性
float
取值:
left : 左浮動
right : 右浮動
none : 無浮動
清除浮動所帶來的影響:
屬性:
clear:left,right,both;
4、元素一旦浮動起來的話,那麼都將成為區塊層級元素
、浮動 元素 對 父層元素帶來的影響
影響:一個元素內如果包含了浮動元素,那麼該元素的高度可能會變成0。
原因:浮動元素 脫離了 文檔流,理論上講,就不在父層容器內
解決方案:
1、顯示設定父層元素的高度
2、通過overflow:hidden 來撐起父層元素的高度
1、顯示方式
1、區塊層級元素
<div></div> hn p
變成行級元素: display:inline-block
特點:單獨佔一行
2、內嵌元素/行內元素
span , b , i , u , s , a
變成區塊層級元素:display:block
總結:
1. 假如某個div元素A是浮動的,如果A元素上一個元素也是浮動的,
那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素,那麼A元素會被擠到下一行);
如果A元素上一個元素是標準流中的元素,
那麼A的相對垂直位置不會改變,也就是說A的頂部總是和上一個元素的底部對齊。
2. 清除浮動可以理解為打破橫向排列。
3. 對於CSS的清除浮動(clear),這個規則只能影響使用清除的元素本身,不能影響其他元素。
定位方式相關屬性
position
取值:
1、static : 預設,靜態定位
2、relative : 相對定位
3、absolute : 絕對位置
4、fixed : 固定定位
2、與定位位置相關屬性
top
bottom
left
right
以像素為單位的值
3、堆疊順序
z-index : value;
值越大越靠近使用者
4、static
頁面中預設定位方式,即文檔流定位
5、相對定位
相對於當前元素本身出現的位置而實現定位的一種方式
實現方式:
position:relative;
通過 top bottom left right 來實現位置移動
使用場合:
1、會進行位置的微妙的調整
2、配合著絕對位置使用
6、絕對位置
特點:脫離文檔流,不佔據頁面空間
定位位置:相對於【最近】的【已定位】的【祖先】元素
如果祖先元素沒有進行定位,它的位置就相對於最初的包含塊(body)
<nav>
<div>
<p>
<span></span>
</p>
</div>
</nav>
已定位:非static , 指 relative、absolute、fixed
實現方式:
position:absolute
top,bottom,left,right : 位置位移量,相對於最近的已定位的祖先元素去位移。
使用場合:
1、快顯功能表的位置
所有的快顯功能表都是絕對位置
7、固定定位
將元素固定在頁面上的某一個位置,不隨捲軸滾動而發生改變
文法:
position:fixed;
top、left、right、bottom
常用方式 1.設定 父元素為position:relative
2. 設定子項目為 position : absolute
3. 設定子項目相對於父元素的位移
如 top:20px; left:30px;
css(浮動)