單列變雙列css CSS實現常見布局

2021-10-19 05:56:28 字數 885 閱讀 5910

從我看到的,知道的,全面的總結一下。css常見布局。

一、單列布局

單列布局,通常定寬(可以使用%,可以實現自適應,也可以直接確定寬度大小)並利用margin: auto進行水平居中

.main

二、雙列布局

1. 定寬雙列布局

常見利用float 進行布局左邊左浮動,右邊右浮動。(或均為左浮動)

需要清除浮動。

可以修改盒子模型為border-box

.main 需要準確確定子容器的寬度,需要border-box模型

需要消除空格的影響,需要父容器font-size : 0

使頂端對齊,`vertical-align: top

雙float

.main

float+ margin-left左邊左浮動

右邊計算margin-left

清除浮動。

.main

使用定位為父元素設定relative定位。

分別定位各個子元素

確定間距。

(不建議使用,因為使用絕對定位,後面加入內容的時候會被覆蓋)

.main

2. flex 實現

同樣需要父容器使用負邊距來進行清除帶來的影響。

html基本**同上

.father {

display: flex;

margin-right: -10px;

.son {

flex: 1 1 auto;

align-items: flex-start;

height: 500px;

border: 1px solid #ff6c60;

margin-right: 10px;

(完)

單列抖音,雙列火山

快手和抖音的起源差異來自產品單雙列容錯性的不同。在快手的雙列展現裡,內容是有標題封面的,是使用者自己主動挑選的,使用者即便點錯了心理上責怪平台的概率會小很多。即雙列模式可以讓使用者在單屏看到更多內容,有更多的流量可以用於小樣測試來發掘使用者興趣。在抖音的單列沉浸下劃邏輯中,使用者看到的內容都是系統預...

實變函式 實分析總結

一 概述。實變函式,又叫實分析,整本書滿滿的證明就講了乙個勒貝格積分。最為大家所熟知的是用牛頓 萊布尼茨公式算的黎曼積分。但是黎曼積分本身依賴於函式的連續性,像不連續的狄利克雷函式就無法積分了。為了解決這一問題,勒貝格利用分割值域的方法,使得函式可積。但是分割出來的值域,只能放在一起,形式集合。如果...

實變函式與泛函分析課本pdf 實變函式與泛函分析

內容概要 本書是為大學非基礎數學專業 實變函式與泛函分析 課程編寫的教材。它的先修課程是數學分析或物理類的高等數學。全書共分6章,內容包括 集合,歐氏空間,lebesgtle測度,lebesgue可測函式,lebesgue積分,測度空間,測度空間上的可測函式和積分,lp空間,l2空間,卷積與four...