响应式怎么实现正方形布局呢?
<!--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
- 公众号:前方录
- 有什么不懂的地方欢迎联系我,帮到你是我会很开心