一道CSS筆試題

2021-09-16 12:22:49 字數 760 閱讀 9500

如上圖所示,螢幕正中間有個元素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. 效果預覽

a  

.father

.son

span

一道筆試題

看到一道筆試題,跟自己想的有點出入,就跑了下,看了看原因。我稍微改了下 include int main int argc,char argv 輸出結果 c 5 d 245 press any key to continue vc6.0 debug下的彙編 5 unsigned char a 0xa...

一道筆試題

上次去筆試的時候,有一道題,怎麼也沒做出來,當時也是很緊張,有些思路,但卻沒有做出來。有四個人要過乙個獨木橋,因為天比較黑,而且橋只能允許兩個人同時通過,並且他們只有乙個手電筒。四個人單獨同時橋的時間是1,2,5,8分鐘。問最短的時間是多少?當時我的答案 1和8,1回來,1 5,1回來,1 2 8 ...

一道筆試題

題目是這樣的 判斷乙個小於1000的正整數是否為素數。素數的定義就不說了,以下直接分析解法,畢竟是在寫與專業相關的東西,是給本專業的人看得,所以看的人應該有點基礎吧?求素數的問題是乙個數學上的難題,這是常識,但是本題目限制了最大範圍是在1000以內,所以就可以嘗試找出乙個足夠好的解了。首先給出乙個最...