css正方形盒子自适应

最新推荐文章于 2024-04-09 15:15:28 发布

weixin_30275415

最新推荐文章于 2024-04-09 15:15:28 发布

阅读量171

点赞数

原文链接：http://www.cnblogs.com/-youth/p/6598325.html

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	*{
	margin:0;
	padding:0;
	}
	.box{
	display:inline-block;
	margin: 1%;
	width: 30%;
	background: #ff6600;
	padding-top: 30%;
	}

	</style>

	</head>
	<div class="box"></div>
	<body>
	//说明：一个不设置宽高的盒子，如何成为一个正方形：为啥padding-top:30%,width:30%就可以呢因为padding-left；padding-top:padding-right;padding-bottom:设置的百分比是按照父级元素的宽度定的，所有只要其中任何两个组合就，在再加上相同的百分比，就可以成为一个随父级元素自适应的正方形，当然，如果盒子里有东西，会被撑开。

	</body>
	</html>