一道CSS笔试题

aikin 发布于2019-08-30 13:47 / 2861人阅读

摘要：分析这道题主要考察的居中和宽高等比例。如果元素的高度和宽度都以某一个值作为参照系，那么理论上元素的乘以可自定义。根据规范，的值为百分比时，是相对于父元素的宽度而言。

如上图所示，屏幕正中间有个元素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;
}

GPU云服务器云服务器笔试题前端笔试题大数据笔试题 java 笔试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115551.html

记一道腾讯前端笔试题

摘要：我今年月投递了腾讯前端开发岗位，很可惜笔试题没通过，小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来嘤嘤嘤。我今年4月投递了腾讯前端开发岗位，很可惜笔试题没通过，48小时内给出答案回复面试官，我的答案太过于简单，所以后面面试官估计也就懒得回我这个菜鸡来（嘤嘤嘤）。当然以我现在的眼光来重新看那份答案，都觉得那不应该是一个一年的前端开发工作者给出的答...

孙吉亮 2019-08-26 14:01 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 评论0 收藏0
前端笔试题面试题记录（下）

摘要：前言接上篇前端笔试题面试题记录上。默认值，不脱离文档流，，，，等属性不生效。。不脱离文档流，依据自身位置进行偏离，当子元素设置，将依据它进行偏离。。前言接上篇前端笔试题面试题记录（上）。趁清明小长假，把上篇剩下的部分也写一下，因为最近比较忙这篇已经拖了很久了。现在刚刚开始银四了，应该还是有些小伙伴在找工作，时间还不算太晚，希望本篇可以帮到这些小伙伴。个人博客了解一下：obkoro...

suemi 2019-08-22 16:05 评论0 收藏0
【手把手带你刷好题】——21.一道笔试题（非力扣）

摘要：前言今天是刷题打卡第天可能有铁汁会问，为什么变成刷好题，而不是刷了呢因为最近笔者遇到很多经典的笔试题，想着记录下来，方便大家和自己学习，所以今后笔者会在标题上注明是不是力扣题。【前言】今天是刷题打卡第21天！可能有铁汁会问，为什么变成刷好题，而不是刷LeetCode 了呢？因为...

骞讳护 2021-11-22 09:34 评论0 收藏0
一道笔试题引发的Promise笔记

摘要：对象是一个返回值的代理，这个返回值在对象创建时未必已知。这使得异步方法可以像同步方法那样返回值异步方法会返回一个包含了原返回值的对象来替代原返回值。前言近来参加校招笔试，发现有好几道关于Promise的题目。然而我都没有了解过。所以，这篇文章以网易笔试的一道题开始，记录关于Promise的那些事。文章地址：http://lsxj615.com/2016/08/04... 笔试题 c...

_Suqin 2019-08-22 10:34 评论0 收藏0