在面试中遇到的问题，做一个自适应的宽高2：1的矩形，这个问题考察了padding的细节，padding-bottom的百分比值，相对的是该盒模型的height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>Title</title>
<style>
#test {
/*height为0，不要有多余的内容*/
height: 0px;
width: 100%;
padding-bottom: 50%; /*相对于width的50%*/
background-color: #4cae4c;
}
</style>
</head>
<body>
<div id="test">死亡如风，常伴吾身</div>
</body>
</html>
不可以使用padding-top，否则内容会被挤出来