做一个宽高为父元素宽度一半的正方形

做一个宽高为父元素宽度一半的正方形

 .outer {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid black;
        }

        .inner {
            width: 50%;
            padding-bottom: 50%;
            background-color: red;
        }

原理：当padding的取值是百分比时，他是相对于父元素的宽度。（父元素宽度为200px，则通过padding得到的正方形边长为100px 注：与父元素的宽度没有关系）.所以我们可以在垂直方向上设置padding-top或者是padding-bottom。注意设置padding-left或者padding-right不会生效。