Home > Article > Web Front-end > How to implement adaptive squares in CSS? Is there a code?
How to implement adaptive squares in CSS? Is there a code?
- 云罗郡主forward
- 2018-10-19 15:33:472510browse
The content of this article is about how to implement adaptive squares in CSS? Is there any code? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现自适应正方形</title>
<style>
/*使用padding-bottom实现正方形*/
#test7{
width: 400px;
background: gray;
}
.placeholder {
width: 30%;
padding-bottom: 30%;/* padding百分比相对父元素宽度计算,用padding去填充height*/
height: 0;/*避免被内容撑开多余的高度 */
background: #4acfff;
}
.vw {
width: 10%;
height: 10vw;
background: pink;
}
</style>
</head>
<body>
<!-- 使用padding-bottom实现正方形 -->
<!--
padding百分比相对父元素宽度计算,用padding去填充height
-->
<p id="test7">
<p class="placeholder">使用padding-bottom实现正方形</p>
</p>
<!-- 使用css3单位vw -->
<!--
原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦
-->
<p class="vw"></p>
</body>
</html>The above is the complete introduction. If you want to know more about CSS video tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to implement adaptive squares in CSS? Is there a code?. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete