文章目錄
- 一、常規流
- 脫離檔案流就是不占元素位置
- 盒模型中的auto值
- 盒子位置
- 二、浮動
- 浮動盒子位置
- 絕對定位
一、常規流
又叫普通流、檔案流、普通檔案流
脫離檔案流就是不占元素位置
盒模型中的auto值
-
水平方向
常規流盒子水平方向上的尺寸，必須等于包含塊的寬度
如果不行，則強行將margin-right設定為auto
-
垂直方向
margin為auto：0px
height為auto：適應內容的高度
盒子位置
-
盒子在包含塊的垂直方向上依次擺放
依次擺放：按照HTML元素的書寫順序從上到下擺放
-
垂直方向上，若兩個外邊距相鄰，則進行合并（折疊）
垂直方向：水平方向上的外邊距不會合并
外邊距相鄰：兩個外邊距之間沒有border、padding和content
外邊距合并（規則）：
1.相同值，取一個
2.都是正值取最大
3.都是負值取最小
4.一正一負則相加
禁止外邊距合并可以加overflow：hidden；
二、浮動
浮動盒子位置
浮動的初衷是為了實作文字環繞
- 左浮動的盒子向上向左排列
- 右浮動的盒子向上向右排列
- 浮動盒子的頂邊不得高于上一個盒子的頂邊
- 若剩余空間無法放下浮動的盒子，則該盒子向下移動，直到具備足夠的空間能容納盒子，然后再向左或向右移動
子級浮動，父級元素高度塌陷
? 缺點：需要在HTML寫一個空標簽
? 解決方式，給父元素添加偽元素
清除浮動
1.clear屬性名 left、right、both（全部）（對最后一個子元素使用可防止父元素塌陷）
2.overflow：hidden；（功能可清除浮動 實際是溢位內容隱藏 也可使外邊距合并）
常規流盒子和浮動盒子混合擺放
為什么高度塌陷 脫離檔案（頁面）流了誰浮動誰脫離
-
浮動盒子在擺放時，要避開常規流盒子
-
常規流盒子在擺放時會無視浮動盒子
-
常規流盒子的自動高度計算時，無視浮動盒子—（高度塌陷）
絕對定位
當浮動元素被設定為絕對定位
屬于絕對定位，float屬性被強制設定為none
影響
絕對定位元素不會對其他任何元素造成任何影響
位置
可以通過top、bottom、right、left進行移動
絕對定位元素的包含塊
固定位置使用場景
position-fixed
-
pc端：頁面頭部區域
-
移動端：footer底部
- ad（廣告）
- 側邊欄
- 目錄
- 回到頂部
- 即時通訊
包含塊為視口 偏移量的設定（移動）
起始位置是視口的左上角
①參照物是螢屏可視區
②元素變成塊元素
③完全脫離檔案流，不占位置
絕對位置
絕對位置包含塊 ：包含我，離我最近的元素的position
的屬性值不是默認值（static）若都是默認值則以視口為包含塊
適用場景 兩個及以上的標簽重疊在一起的時候
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272897.html
標籤：其他
上一篇：解讀JavaScript迭代器