响应式怎么实现正方形布局呢?

<!--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;*/
}

 

博主联系方式:

  • 微信:34419369
  • QQ: 34419369
  • 公众号:前方录
  • 有什么不懂的地方欢迎联系我,帮到你是我会很开心

Leave a Reply

邮箱地址不会被公开。 必填项已用*标注