标签：父级 top padding 宽度 10px margin 100%
页面中有一个元素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等属性的百分比值不一样。
标签：父级,top,padding,宽度,10px,margin,100% 来源： https://blog.csdn.net/Amnesiac666/article/details/120865387
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。