页面中有一个元素A，假设需求如下：
- 元素A在页面内水平、垂直居中；
- 元素A距离页面左右的间距为10px，元素A的宽度随页面宽度变大而变大；
- 设置元素A的高度始终为宽度的一半；
方式一（利用calc和vw）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
/* 设置子元素A垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
}
.a {
/* 设置margin左右间距为10px */
margin: 0 10px;
background: #F00;
/* 设置宽度为100vw，实际宽度会受到弹性盒子的影响 */
width: 100vw;
/* calc方法动态计算：height的值为宽度的1/2，所以是 (100vw - 20px) / 2 */
height: calc(50vw - 10px);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
方式二（探究padding-top的秘密）：
当padding-top的值为百分比时，参考的对象是父级元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
/* 设置子元素A垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
}
.a {
/* 设置margin左右间距为10px */
margin: 0 10px;
background: #F00;
/* 设置宽度为100%，父级容器宽度的100%，实际宽度会受到弹性盒子的影响 */
width: 100%;
height: 0;
/* calc方法动态计算：padding-top的值为父级容器宽度的1/2，所以是 (100vw - 20px) / 2 */
padding-top: calc(50% - 10px);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
此处也可以选择使用padding-bottom
最后
在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
