一个容器里面有个正方形，不管容器的长和宽怎么变化，正方形的边长始终是容器长的一半，怎么设置正方形的CSS属性

佩淇呢

已于 2023-12-15 14:35:10 修改

阅读量945

点赞数 17

分类专栏： CSS 文章标签： css 前端 vue.js javascript

于 2023-12-15 14:34:14 首次发布

本文链接：https://blog.csdn.net/m0_67880202/article/details/135015892

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此题目为某厂的面试题，在这里做个解答。

要实现这个效果，可以使用 padding-top 或者 padding-bottom 的百分比值来实现正方形，因为这两个属性值的百分比是相对于父元素的宽度来计算的。

示例代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.container {
  width:400px;
  height:300px;
  background-color: yellow;
}

.square {
  width: 50%;
  padding-bottom: 50%;
  background-color: red; /* 设置正方形的背景颜色 */
}
    </style>
</head>
<body>
    <div class="container">
        <div class="square"></div>
    </div>
</body>
</html>

可能会有疑问，为什么square容器没有设置高度，也会有高度，还是container容器宽度的50%。

首先，解答第一个问题：为什么square容器没有设置高度，也会有高度。

这就要说到盒模型了。

CSS 盒模型（Box Model）包含两种：标准盒模型（content-box）和IE盒模型（border-box）。

标准盒模型（content-box）：元素的宽度和高度只包括内容的宽度和高度，不包括内边距（padding）、边框（border）和外边距（margin），内边距、边框和外边距都是在元素的宽度和高度之外进行绘制的。

IE盒模型（border-box）：元素的宽度和高度包括内边距、边框和内容的宽度和高度，内边距和边框都会被计算在元素的宽度和高度之内，而外边距则依然是在元素的宽度和高度之外进行绘制的。

用代码举个例子：

<!DOCTYPE html>
<html>
<head>
	<title>CSS盒模型示例</title>
	<style type="text/css">
		/* 标准盒模型 */
		/* content-box */
		.box-content {
			width: 200px;
			height: 100px;
			padding: 20px;
			border: 5px solid black;
			margin: 10px;
			background-color: #f00;
			box-sizing: content-box;
		}

		/* IE盒模型 */
		/* border-box */
		.box-border {
			width: 200px;
			height: 100px;
			padding: 20px;
			border: 5px solid black;
			margin: 10px;
			background-color: #f00;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<h2>标准盒模型（content-box）</h2>
	<div class="box-content">
		此处为.box-content内的内容
	</div>

	<h2>IE盒模型（border-box）</h2>
	<div class="box-border">
		此处为.box-border内的内容
	</div>
</body>
</html>

同样的css属性设置，此时我们计算两个盒子的宽高：

对于标准盒模型（content-box）的盒子 .box-content：

宽度 = 内容宽度 (200px) + 左右内边距 (20px + 20px) + 左右边框宽度 (5px + 5px) = 250px
高度 = 内容高度 (100px) + 上下内边距 (20px + 20px) + 上下边框宽度 (5px + 5px) = 150px

对于IE盒模型（border-box）的盒子 .box-border：

宽度 = 内容宽度 (200px) = 200px
高度 = 内容高度 (100px) = 100px

搞懂盒模型就可以回答第一个问题了，浏览器默认的是标准盒模型（content-box），所以虽然没有给square容器设置高度，但是我们设置了padding值，这时候也就有了高度。

回到第二个问题：为什么square容器的高度是container容器宽度的一半。

代码中给square容器设置了padding-bottom: 50%;

这个代码非常关键！

当我们使用百分比时，这个时候的padding-bottom或者padding-top计算方式就是基于父容器的宽度来计算的，而非元素本身的宽度。

所以我们就可以回答这个问题了。

父元素中定义宽高，假设父元素高度400，子元素设置宽度为父元素的百分之50，子元素的宽度就是200，设置,子元素的padding-bottom或者padding-top为50%，此时子元素的高度为200，因此子元素始终为正方形，并且边长是父元素的宽的一半。

佩淇呢

关注

17
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
一个容器里面有个正方形，不管容器的长和宽怎么变化，正方形的边长始终是容器长的一半，怎么设置正方形的CSS属性

此题目为某厂的面试题，在这里做个解答。要实现这个效果，可以使用 padding-top 或者 padding-bottom 的百分比值来实现正方形，因为这两个属性值的百分比是相对于父元素的宽度来计算的。可能会有疑问，为什么square容器没有设置高度，也会有高度，还是container容器宽度的50%。
复制链接

扫一扫