Python 浮動 清浮動

2022-06-23 18:45:08 字數 1494 閱讀 8466

# 浮動佈局

## 一.display總結

```css

/* 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知識

```css

/* 本質 */

/*overflow: 處理內容超出盒子顯示區域*/

overflow: auto | scroll | hidden

/*auto: 自適應, 內容超出, 滾動顯示超出部分, 不超出則正常顯示*/

/*scroll: 一直採用滾動方式顯示*/

/*hidden: 隱藏超出盒子顯示範圍的內容*/

```## 三.浮動佈局

```css

/*float: 浮動佈局, 改變bfc的參照方位*/

/*為什麼要使用: 使用它, 塊級盒子就會同行顯示*/

``````css

float: left | right; 左 | 右 浮動

/*left: bfc參照方向從左向右*/

/*right: bfc參照方向從右向左*/

``````css

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

```## 四.清浮動

浮動問題: 子級浮動了,不再撐開父級的高度, 那麼父級如果擁有兄弟標籤,可能就會出現佈局重疊問題

清浮動: 解決上面的問題, 通過使父級獲取一個合適的高度, 這樣子級就不會和父級的兄弟佈局發生重疊

clear: left | right | both

① 設定父級的死高度

② 通過兄弟設定 clear: both

③ 設定父級overflow屬性

.sup

④ 通過父級:after偽類

.sup:after

Python閱讀清單

零基礎學python 第二版 》 包括進階 the python tutorial 絕對權威和主題豐富的官方教程 pep 8 以及 pep...

python目錄和檔案的列表清單

import os 通過給定的資料夾,列舉出這個資料夾當中,所有的檔案,以及資料夾,子資料夾當中的所有檔案 def listfilestotxt dir file 1 列舉出,當前給定的資料夾,下的所有子資料夾,以及子檔案 file list os listdir dir print file li...