PHP前端开发

看看这些前端面试题,带你搞定高频知识点(一)

百变鹏仔 3个月前 (09-20) #CSS
文章标签 知识点

每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。

面试官:给定一个元素,如何实现水平垂直居中?

我:呃~,针对这个问题,我想到了三种常见的方式:定位、flex和grid布局。整出代码如下

定位:因为这个元素不确定是不是块级元素 (块级元素是否有宽高) 还是行内元素,所以需要使用 transform 属性来做负的 50%移动(基于当前元素宽高)。

<style>  html,body{    margin: 0;    padding: 0;    height: 100%;    position: relative;  }  .item{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);  }</style>  <div>    块状元素  </div>  <div>不定高宽的块状元素</div>  <span>行内元素</span>

flex布局:不仅支持块状元素,而且支持行内元素,对固定高宽与不固定高宽皆可使用。【