浮動佈局

一.display小結

/* inline */
/*1.同行顯示, 就相當於純文字, 當一行顯示不下, 如就是一個字顯示不下,那麼顯示不下的那一個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有一個空格的隔斷*/
/*2.支援部分css樣式, 不支援寬高 | 行高(行高會對映到父級block標籤) | margin上下*/
/*3.content由文字內容撐開*/
/*4.inline標籤只巢狀inline標籤*/
​
/* inline-block */
/*1.同行顯示, 當一行顯示不下, 標籤會作為一個整體換行顯示*/
/*2.支援所有css樣式*/
/*3.content預設由文字(圖片)內容撐開,也可以自定義寬高, 當自定義寬高後,一定採用自定義寬高(顯示區域不足,內容會在標籤內容換行顯示,可能超出顯示區域)*/
/*4.inline-block標籤不建議巢狀任意標籤*/
​
/* block */
/*1.異行顯示, 不管自身區域多大, 都會獨佔一行*/
/*2.支援所有css樣式*/
/*3.width預設繼承父級,height由內容(文字,圖片,子標籤)撐開, 當設定自定義寬高後,一定採用自定義寬高*/
/*4.block可以巢狀任意標籤*/
       

二.overflow知識

/* 本質 */
/*overflow: 處理內容超出盒子顯示區域*/
overflow: auto | scroll | hidden
/*auto: 自適應, 內容超出, 滾動顯示超出部分, 不超出則正常顯示*/
/*scroll: 一直採用滾動方式顯示*/
/*hidden: 隱藏超出盒子顯示範圍的內容*/
           

三.浮動佈局

/*float: 浮動佈局, 改變BFC的參照方位*/
/*為什麼要使用: 使用它, 塊級盒子就會同行顯示*/

float: left | right;  左 | 右 浮動
/*left: BFC參照方向從左向右*/
/*right: BFC參照方向從右向左*/

/*浮動的區域有父級的width決定*/

四.清浮動

浮動問題: 子級浮動了,不再撐開父級的高度, 那麼父級如果擁有兄弟標籤,可能就會出現佈局重疊問題
​
清浮動: 解決上面的問題, 通過使父級獲取一個合適的高度, 這樣子級就不會和父級的兄弟佈局發生重疊
​
clear: left | right | both

① 設定父級的死高度
② 通過兄弟設定 clear: both
​
③ 設定父級overflow屬性
.sup {
    overflow: hidden;
}
​
④ 通過父級:after偽類
.sup:after {
    content: "";
    display: block;
    clear: both;
}

定位佈局

一.浮動佈局的總結

1.同一結構下, 如果採用浮動佈局,所有的同級別兄弟標籤都要採用浮動佈局
2.浮動佈局的盒子寬度在沒有設定時會自適應內容寬度

二.盒子的顯隱

display: none;
在頁面中不佔位, 採用定位佈局後, 顯示隱藏都不會影響其他標籤佈局, 不需要用動畫處理時
​
opacity: 0;
在頁面中佔位, 採用定位佈局後, 顯示隱藏都不會影響其他標籤佈局, 需要採用動畫處理時

三.定位佈局

什麼是定位佈局: 可以通過上下左右四個方位完成自身佈局的佈局方式

相對定位

參考系: 自身原有位置
position: relative;  => 打開了四個定位方位
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.left = -right | top = -bottom
3.佈局後不影響自身原有位置
4.不脫離文件流

絕對定位

參考系: 最近的定位父級
position: absolute;  => 打開了四個定位方位
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.父級必須自己設定寬高
3.完全離文件流

固定定位

參考系: 頁面視窗
position: fixed;  => 打開了四個定位方位
1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左
2.相對於頁面視窗是靜止的
3.完全脫離文件流

z-index

修改顯示層級(在發生重疊時使用), 值取正整數, 值不需要排序隨意規定, 值大的顯示層級高

四.流式佈局思想

1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem