[分享]css 正方形实现

CSS 正方形实现是指利用 CSS 样式规则使一个元素呈正方形。在页面布局设计中，常常需要制作一个正方形元素。下面介绍两种 CSS 实现正方形的方法。方法一：.square { width: 100p...

CSS 正方形实现是指利用 CSS 样式规则使一个元素呈正方形。在页面布局设计中，常常需要制作一个正方形元素。下面介绍两种 CSS 实现正方形的方法。

方法一：

.square {
width: 100px;
height: 100px;
}

这种方法很简单，直接设置元素的宽度和高度相同即可。但是如果你需要根据屏幕尺寸自适应的话，这种方法就不太可行了。

方法二：

.square {
width: 50%;
padding-bottom: 50%;
position: relative;
}
.square:before {
content: "";
display: block;
padding-top: 100%;
}

这种方法通过 padding-bottom 实现元素的高度自适应，并利用伪元素 :before 给这个元素设置一个 padding-top 使其高度等于宽度，从而呈正方形。其中，利用 position:relative 将伪元素定位到了父元素的左上角。

通过以上两种方法，我们可以轻松创建一个 CSS 正方形元素。

江苏,常州