css怎么使宽高相等？_米醋屋个人技术博客

在开发工程中，我们经常要用到宽高相等这个方式，但是很多新手不知道怎么设置比较好，这里我给大家介绍一种思路设置宽高相等的纯css实现方法。
代码如下：
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>米醋儿网</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<style type="text/css">
				div.category{
				    width:32%;
				    padding:32% 0 0 0;
					float: left;
					margin-left: 1%;
					margin-top: 1%;
					background-color: antiquewhite;
					position: relative;
				}
				.category_title{
					position: absolute;
					top: 16%;
					font-size: 1.2rem;
					width: 100%;
					text-align: center;
				}
		</style>
	</head>
	<body>
		<div class="category">
			<h3 class="category_title">米醋儿</h3>
		</div>
		<div class="category">
			<h3 class="category_title">米醋儿</h3>
		</div>
		<div class="category">
			<h3 class="category_title">米醋儿</h3>
		</div>
		<div class="category">
			<h3 class="category_title">米醋儿</h3>
		</div>
	</body>
</html>

```

> 原理：padding使用百分比时，padding-top和padding-bottom使用的也是宽度的百分比，而不是高度的！！！

效果预览：
[![](https://micuu.com/data/upload/20210208/6020a90d4cf12.png)](https://micuu.com/data/upload/20210208/6020a90d4cf12.png)

整体还不错吧，大家拿去改良一下就可以用了。

注:原创不易,转载请注明出处( http://www.micuu.com/new/1393.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。