纯css3如何实现宽高动态相等

html-css014

纯css3如何实现宽高动态相等,第1张

<body>

    <div style="height: 30% width: 100% background-color: yellowposition: relative">

        <div style="background-color: red width: 30%padding-top: 30%height: 0">

            <b style="color: blackfont-size: 34px">通过padding实现的正方形</b></div>

        <div style="position: absoluteright:0top:0background-color: pinkwidth: 50%height: 100%">

            <div style="background-color: blue height: 25vw width: 50%">

                <b style="color: whitefont-size: 34px">通过vw，vh实现的正方形</b></div>

        </div>

    </div></body>

1.根据padding属性实现正方形。

图中的左侧就是通过padding实现的正方形

padding的属性可能的值有四种类型：

首先确保这个div是不是是block。默认情况下，div是block。可能在设置某些css样式的时候更改了也不一定。 可以如果设置了高度，他的高度就会固定下来。可以这样改。不设置他的高度，设置它的overflow：hidden属性就可以自适应内容了、