pic01.png
如上圖所示惯豆，屏幕正中間有個(gè)元素A诺核，隨著屏幕寬度的增加血崭，始終需要滿足以下條件：
- A元素垂直居中于屏幕中央；
- A元素距離屏幕左右邊距各20px;
- A元素里面的文字“A”水平垂直居中嚷闭；
- A元素的高度始終是A元素寬度的50%屈暗。
用html和css實(shí)現(xiàn)绵估。
分析
這道題主要考察css的居中和寬高等比例集币。其中，居中是css的經(jīng)典知識(shí)點(diǎn)泌射，有很多種實(shí)現(xiàn)粘姜，我喜歡用transform屬性來(lái)控制。我們重點(diǎn)來(lái)看考察的第二個(gè)知識(shí)點(diǎn)：
在寬度不定的情況下熔酷，保持寬高的比例孤紧，這個(gè)使用場(chǎng)景比較少。不用js拒秘，純CSS應(yīng)該怎么實(shí)現(xiàn)呢号显？
直覺(jué)是想到用css3的calc來(lái)解決，行不通躺酒。
如果A元素的高度和寬度都以某一個(gè)值作為參照系押蚤，那么理論上A元素的height = n 乘以 width（n可自定義）。根據(jù)css規(guī)范羹应，padding的值為百分比時(shí)活喊，是相對(duì)于父元素的寬度而言×坷ⅲ可見(jiàn)，父元素的寬度就是一個(gè)完美的參照系帅矗！給A元素包一個(gè)父元素偎肃，A元素的width為100%，height為0浑此，padding-top為50%累颂。這就實(shí)現(xiàn)了A元素的寬高等比例啦~
Talk is cheap. Show me the code. 效果預(yù)覽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="father">
<div class="son"><span>A</span></div>
</div>
</body>
</html>
.father{
overflow:hidden;
position: absolute;
left:20px;
right:20px;
top:50%;
transform: translateY(-50%);
}
.son{
height:0;
width:100%;
padding-top:50%;
background:pink;
}
span{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
font-size:10px;
}
