CSS中可以通過設(shè)置元素的width屬性和height屬性來設(shè)置它的長和寬。
但是,有時候我們希望元素的長和寬相等,也就是正方形。這時可以通過以下的CSS代碼實現(xiàn):
.selector{ width: 100px; height: 100px; }
可以看到,將width和height屬性都設(shè)置為相同的數(shù)值即可實現(xiàn)元素的長和寬相等。
如果希望長和寬動態(tài)適應(yīng)屏幕大小,也可以使用下面的代碼:
.selector{ width: 50vw; height: 50vw; }
其中vw是視窗寬度的單位,50vw表示元素寬度為視窗寬度的50%。這樣設(shè)置可以保證元素在不同設(shè)備和屏幕尺寸下都呈現(xiàn)正方形。
需要注意的是,對于某些元素來說,如圖片、視頻等,可能存在固有的長寬比例,此時將width和height都設(shè)置為相同的數(shù)值可能會導(dǎo)致元素變形,需要根據(jù)具體情況進行適當?shù)恼{(diào)整。
上一篇css 隱藏特效代碼
下一篇css 鏈接背景圖