首页  >  网站建设  >  前端网页  >  网页模块怎样实现响应式正方形布局？

<!--html代码-->
<div class="wrapper"><!--父级元素-->
  <div class="square"></div><!--正方形元素-->
</div>

/*css代码*/
.wrapper {
  width: 100%; /*该元素的宽度是父级内容宽度的100%；*/
  max-width: 1000px;/*该元素的最大宽度是1000px；*/
  height: 800px;/*该元素的高度为800px;*/
  margin: 0 auto;/*该元素上下边距为0，左边距 =右边距=（父元素的宽度 - 本元素的宽度和计算自动调节）/2*/
  padding: 50px;/*该元素的上下左右的内边距为50px;*/
  background-color: green;/*该元素的背景色为绿色;*/
  box-sizing: border-box;/*该元素的内容宽 = width - 左右padding和 - 左右border和；*/
}
.square {
  width: /*50%;该元素的宽度是父级内容宽度的50%；*/
  height: 0;/*该元素的高度为0；*/
  padding-top: 50%;/*该元素的上内边距为父级元素内容宽度的50%；*/
  background-color: /*orange;该元素的背景色为桔色;*/
  border: 1px solid #000;/*该元素的边框宽为1px 边框样式为solid,边框颜色为#000;*/
}