CSS寫彈性正方形是一種優雅的布局方式。相比于使用固定大小的盒子,彈性正方形能夠自適應不同的屏幕尺寸,更適合響應式布局。
.square { width: 50%; padding-bottom: 50%; /* 設置 padding-bottom 為寬度的 50% 可以讓盒子形成正方形 */ background-color: #f4f4f4; /* 可以自定義背景顏色 */ }
上面的代碼會創建一個彈性正方形,它的寬度和高度都是父元素寬度的一半。我們使用 padding-bottom 屬性來實現這個功能,同時也可以隨意改變盒子的背景顏色。
為了讓彈性正方形居中,我們可以使用以下代碼:
.center { display: flex; justify-content: center; align-items: center; /* 居中 */ }
以上代碼使用了 flex 布局來實現垂直和水平居中。我們可以將 .center 作為彈性正方形的父元素來實現居中效果。
總結一下,CSS寫彈性正方形的關鍵在于:
1. 使用 padding-bottom 屬性來保證寬度和高度相等;
2. 可以隨意改變盒子的背景顏色;
3. 使用 flex 布局來實現居中效果。
上一篇mysql數據量有多大
下一篇css寫在哪個位置