移動端彈性效果

2021-09-20 08:04:52 字數 606 閱讀 6226

布局一: 定義頁面整體高度為100%,然後使用 position:absolute 布局可解決

header

彈性滾動區域

footer

html,body

.wrap

.header,.footer

.header

.footer

.main

布局二: 定義頁面整體高度為100%,然後使用 display:flex 布局可解決

header

彈性滾動區域

footer

html,body
.wrap
.header,.footer
.main

那麼剩下的主要問題是子容器高度超出父容器高度,子容器內容如何彈性滾動。

.css

移動端 彈性盒子

1.父級 display box display moz box display webkit box box orient horizontal moz box orient horizontal webkit box orient horizontal horizontal表橫向,vertica...

移動端 彈性盒子布局

1.基本概念 採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的縱軸 cross axis 主軸的開始位置 與邊框的交叉點 ...

移動端輪播效果

一 涉及知識點 1.touchstart touchmove touchend 2.觸控引數,事件e e.touches 螢幕中所有手勢列表 e.touches 0 獲取第乙個手勢,是乙個json物件 屬性有pagex,pagey.用於touchstart,touchmove事件中 e.change...