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
?? ??? ?垂直方向對齊
?? ??? ?td
?? ??? ?img
?? ??? ??? ?取值：
?? ??? ??? ?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、使用場合
?? ?彈出菜單
?? ??? ?
?? ??? ?

轉載于:https://www.cnblogs.com/Zs-book1/p/10420594.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的float浮动，定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。