css實現正方形div的3種方式

2022-03-28 14:26:23 字數 423 閱讀 7656

1.css3 vw 單位 

1vw = 1% viewport width

hello,viewport

.vw

實測不管用(chrome,版本 49.0.2623.110)

2.padding-bottom

.placeholder

這個確實管用,但是沒有辦法在裡面寫字了

3,padding-bottom+:after+absolute

hello!

.square .square:after .content

這個方法不錯,而且還能在裡面寫字

我還想到了其他幾種方法:

1.利用js計算出方塊(笨方法)

2.畫乙個正方形**

Android實現正方形View

我們在開發的時候,是不是有這樣的需求呢?1.layout是個正方形 2.view是個正方形 我們下面就以具體的情景來做一次簡單的開發來滿足我們的需求 建立乙個relativelayout,滿足高度等於寬度,寬度是填充父容器,這樣來滿足我們不論在何種螢幕尺寸下面,都能很好的適配,下面貼 我們先自定義乙...

recyclerview 實現正方形網格效果

然後就是按慣例寫item布局 一切就緒,真機跑起來,我用的一台的nexus4測試,下面是顯示效果 仔細想想,item布局的寬度是你指定recycleview列數以後確定下來,高度在onmeasue方法裡計算出來,如果想要實現效果圖那樣矩形的效果,自然需要寬高一樣。有了思路以後,只需要把item布局的...

CSS實現自適應正方形

在處理移動端頁面時,我們有時需要將banner圖做成與螢幕等寬的正方形以獲得最佳效果。方案一 css3 vw單位 css3中新增了一組相對於可視區域百分比的長度單位 vw,vh,vmin,vmax。vw是相對於視口寬度的百分比,1vw 1 viewport width vh是相對於視口高度的百分比,...