css宽是高的两倍 |css禅意花园 csdn

/* 假设大家要让名为 box 的元素的宽度是高度的两倍 */
.box {
width: 200px; /* 先设置一个宽度 */
height: 100px; /* 再设置一个高度 */
}

这样大家就定义了一个宽为200px，高为100px的元素，但是大家需要让它的宽度是高度的两倍，大家可以使用CSS中的 calc() 函数来计算出宽度的值。

.box {
height: 100px;
width: calc(2 * 100px); /* 计算出宽度 */
}

这样，大家就成功地实现了让元素的宽度是高度的两倍的效果。需要注意的是，大家在 calc() 中使用的值需要加上单位，如上面的例子中就是添加了像素（px）单位。此外，大家还可以在 calc() 中使用其他的运算符，如加号、减号、乘号和除号，从而实现更加复杂的宽度计算。

总之，在CSS中使用宽度和高度的属性非常常见，而让元素的宽度是高度的两倍也是经常使用的效果。有了 calc() 函数，大家可以更加方便地实现这个效果。