資訊專欄INFORMATION COLUMN
摘要：分析這道題主要考察的居中和寬高等比例。如果元素的高度和寬度都以某一個值作為參照系，那么理論上元素的乘以可自定義。根據規范，的值為百分比時，是相對于父元素的寬度而言。
如上圖所示，屏幕正中間有個元素A，隨著屏幕寬度的增加，始終需要滿足以下條件：
A元素垂直居中于屏幕中央；
A元素距離屏幕左右邊距各20px;
A元素里面的文字“A”水平垂直居中；
A元素的高度始終是A元素寬度的50%。
用html和css實現。
分析這道題主要考察css的居中和寬高等比例。其中，居中是css的經典知識點，有很多種實現，我喜歡用transform屬性來控制。我們重點來看考察的第二個知識點：
在寬度不定的情況下，保持寬高的比例，這個使用場景比較少。不用js，純CSS應該怎么實現呢？
直覺是想到用css3的calc來解決，行不通。
如果A元素的高度和寬度都以某一個值作為參照系，那么理論上A元素的height = n 乘以 width（n可自定義）。根據css規范，padding的值為百分比時，是相對于父元素的寬度而言?？梢?，父元素的寬度就是一個完美的參照系！給A元素包一個父元素，A元素的width為100%，height為0，padding-top為50%。這就實現了A元素的寬高等比例啦~
Talk is cheap. Show me the code. 效果預覽
JS Bin A
.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;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115551.html
摘要：我今年月投遞了騰訊前端開發崗位，很可惜筆試題沒通過，小時內給出答案回復面試官，我的答案太過于簡單，所以后面面試官估計也就懶得回我這個菜雞來嚶嚶嚶。 我今年4月投遞了騰訊前端開發崗位，很可惜筆試題沒通過，48小時內給出答案回復面試官，我的答案太過于簡單，所以后面面試官估計也就懶得回我這個菜雞來（嚶嚶嚶）。當然以我現在的眼光來重新看那份答案，都覺得那不應該是一個一年的前端開發工作者給出的答...
摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據自身位置進行偏離，當子元素設置，將依據它進行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了?，F在剛剛開始銀四了，應該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。 個人博客了解一下：obkoro...
摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據自身位置進行偏離，當子元素設置，將依據它進行偏離。。 前言 接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了?，F在剛剛開始銀四了，應該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。 個人博客了解一下：obkoro...
摘要：前言今天是刷題打卡第天可能有鐵汁會問，為什么變成刷好題，而不是刷了呢因為最近筆者遇到很多經典的筆試題，想著記錄下來，方便大家和自己學習，所以今后筆者會在標題上注明是不是力扣題。 【前言】 今天是刷題打卡第21天！ 可能有鐵汁會問，為什么變成刷好題， 而不是刷LeetCode 了呢？因為...
摘要：對象是一個返回值的代理，這個返回值在對象創建時未必已知。這使得異步方法可以像同步方法那樣返回值異步方法會返回一個包含了原返回值的對象來替代原返回值。 前言 近來參加校招筆試，發現有好幾道關于Promise的題目。然而我都沒有了解過。所以，這篇文章以網易筆試的一道題開始，記錄關于Promise的那些事。文章地址：http://lsxj615.com/2016/08/04... 筆試題 c...
閱讀 2097·2023-04-26 00:09
閱讀 3114·2021-09-26 10:12
閱讀 3480·2019-08-30 15:44
閱讀 2863·2019-08-30 13:47
閱讀 921·2019-08-23 17:56
閱讀 3225·2019-08-23 15:31
閱讀 474·2019-08-23 13:47
閱讀 2508·2019-08-23 11:56
