CSS 实现正方形是我们在设计网页时经常会使用到的技巧。传统的方式是通过设置宽度和高度相等来实现,但是这种方法有一个弊端:当我们的网页需要响应式布局时,正方形的宽度会随着浏览器的大小而改变,而高度却保
CSS 实现正方形是我们在设计网页时经常会使用到的技巧。传统的方式是通过设置宽度和高度相等来实现,但是这种方法有一个弊端:当我们的网页需要响应式布局时,正方形的宽度会随着浏览器的大小而改变,而高度却保持不变,导致正方形变形。下面我们来介绍一种不固定宽度的方法来实现正方形。
.square { width: 50%; padding-bottom: 50%; /* 宽度为 50%,高度等于宽度的 50% */ position: relative; } .square:before { content: ""; display: block; /* 利用伪元素在容器内部创建一个占位元素 */ padding-top: 100%; /* 高度为宽度的 100% */ } .square > * { position: absolute; width: 100%; height: 100%; /* 容器内部元素继承容器高宽,实现正方形 */ }
首先,我们需要将容器宽度设置为 50% ,高度设置为 0 。接着利用一个 padding-bottom 来撑开容器的高度,其值为容器宽度的 50% ,也就是让容器的高度等于宽度的一半。这样我们就实现了容器高宽相等的效果。
接下来,我们使用伪元素 :before 在容器内部创建一个占位元素,利用 padding-top 来实现其高度等于宽度的效果,这样我们就可以让容器内部的元素继承宽度和高度,实现正方形的效果。
最后,我们将容器内部的元素的定位设置为绝对定位,继承容器高宽,这样就可以实现正方形的效果了。
粉丝
0
关注
0
收藏
0