一道CSS筆試題

aikin 發(fā)布于2019-08-30 13:47 / 2873人閱讀

摘要：分析這道題主要考察的居中和寬高等比例。如果元素的高度和寬度都以某一個值作為參照系，那么理論上元素的乘以可自定義。根據(jù)規(guī)范，的值為百分比時，是相對于父元素的寬度而言。

如上圖所示，屏幕正中間有個元素A，隨著屏幕寬度的增加，始終需要滿足以下條件：

A元素垂直居中于屏幕中央；

A元素距離屏幕左右邊距各20px;

A元素里面的文字“A”水平垂直居中；

A元素的高度始終是A元素寬度的50%。

用html和css實現(xiàn)。

分析

這道題主要考察css的居中和寬高等比例。其中，居中是css的經(jīng)典知識點，有很多種實現(xiàn)，我喜歡用transform屬性來控制。我們重點來看考察的第二個知識點：

在寬度不定的情況下，保持寬高的比例，這個使用場景比較少。不用js，純CSS應(yīng)該怎么實現(xiàn)呢？

直覺是想到用css3的calc來解決，行不通。

如果A元素的高度和寬度都以某一個值作為參照系，那么理論上A元素的height = n 乘以 width（n可自定義）。根據(jù)css規(guī)范，padding的值為百分比時，是相對于父元素的寬度而言。可見，父元素的寬度就是一個完美的參照系！給A元素包一個父元素，A元素的width為100%，height為0，padding-top為50%。這就實現(xiàn)了A元素的寬高等比例啦~

Talk is cheap. Show me the code. 效果預(yù)覽




  
  
  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;
}

云服務(wù)器 GPU云服務(wù)器筆試題前端筆試題大數(shù)據(jù)筆試題 java 筆試題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115551.html

相關(guān)文章

記一道騰訊前端筆試題

摘要：我今年月投遞了騰訊前端開發(fā)崗位，很可惜筆試題沒通過，小時內(nèi)給出答案回復(fù)面試官，我的答案太過于簡單，所以后面面試官估計也就懶得回我這個菜雞來嚶嚶嚶。我今年4月投遞了騰訊前端開發(fā)崗位，很可惜筆試題沒通過，48小時內(nèi)給出答案回復(fù)面試官，我的答案太過于簡單，所以后面面試官估計也就懶得回我這個菜雞來（嚶嚶嚶）。當(dāng)然以我現(xiàn)在的眼光來重新看那份答案，都覺得那不應(yīng)該是一個一年的前端開發(fā)工作者給出的答...

孫吉亮 2019-08-26 14:01 評論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經(jīng)拖了很久了。現(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。個人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 評論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經(jīng)拖了很久了。現(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。個人博客了解一下：obkoro...

suemi 2019-08-22 16:05 評論0 收藏0
【手把手帶你刷好題】——21.一道筆試題（非力扣）

摘要：前言今天是刷題打卡第天可能有鐵汁會問，為什么變成刷好題，而不是刷了呢因為最近筆者遇到很多經(jīng)典的筆試題，想著記錄下來，方便大家和自己學(xué)習(xí)，所以今后筆者會在標(biāo)題上注明是不是力扣題。【前言】今天是刷題打卡第21天！可能有鐵汁會問，為什么變成刷好題，而不是刷LeetCode 了呢？因為...

騫諱護 2021-11-22 09:34 評論0 收藏0
一道筆試題引發(fā)的Promise筆記

摘要：對象是一個返回值的代理，這個返回值在對象創(chuàng)建時未必已知。這使得異步方法可以像同步方法那樣返回值異步方法會返回一個包含了原返回值的對象來替代原返回值。前言近來參加校招筆試，發(fā)現(xiàn)有好幾道關(guān)于Promise的題目。然而我都沒有了解過。所以，這篇文章以網(wǎng)易筆試的一道題開始，記錄關(guān)于Promise的那些事。文章地址：http://lsxj615.com/2016/08/04... 筆試題 c...

_Suqin 2019-08-22 10:34 評論0 收藏0