[分享]css写一个与屏幕等宽的正方形

在网页设计中，为了让设计更加美观，有时候需要使用CSS来实现一些特殊的布局效果。今天我们来学习一下，如何用CSS来实现一个与屏幕等宽的正方形。div { width: 100vw; / 宽度为视口百分...

在网页设计中，为了让设计更加美观，有时候需要使用CSS来实现一些特殊的布局效果。今天我们来学习一下，如何用CSS来实现一个与屏幕等宽的正方形。

div {
  width: 100vw; /* 宽度为视口百分比 */
  height: 100vw; /* 高度也为视口百分比 */
  background-color: red; /* 可以根据需要设置背景颜色 */
} 

如上代码所示，在CSS中，我们可以通过设置width和height属性为视口百分比来达到与屏幕等宽的效果。由于视口的宽和高是不同的，我们只需设置其中一个属性为100vw即可。

在代码块中，我们设置了一个div元素，并将其width和height均设置为100vw，这样，这个元素的宽和高度就与视口的宽高比例一致，从而实现了与屏幕等宽的正方形效果。

同时，我们也可以根据需要设置这个元素的背景颜色，从而实现更多的个性化效果。通过简单的CSS代码，我们就能轻松实现一个与屏幕等宽的正方形布局了。