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:472494browse

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!

php css

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Multiple divs are arranged vertically, centered and horizontally (with code)Next article：Multiple divs are arranged vertically, centered and horizontally (with code)

See more

How to implement adaptive squares in CSS? Is there a code?

Related articles