58同城面试总结

发表于： 分类于：
字数：668 阅读：≈ 2分钟 浏览：

前言:面试中问了一些基础的问题,非常能反映基本功是否扎实,很佩服58的工程师!

记录两个印象比较深的两道CSS面试题,面试官对效果实现都是希望多种方法实现,平时的积累需要灵活应用:

1.左固定一个宽度div,右边div宽度自适应,如何实现?

听到这个问题我还挺开心的,因为前两天还写过,当时也是试了几次才写出来,只是没有在意和及时总结。现场回答的非常不好，比较惭愧,回到家第一件事就把这个题模拟了一下：

  • 利用绝对定位和padding-left实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  *{
    margin:0;
    padding:0;
  }
  .box{
    width:100%;
    position:relative;
  }
  .left{
    width:300px;
    position:absolute;
    z-index: 10;
    min-height:300px;
    background:#f00;
  }
  .right{
    width:100%;
    position:absolute;
    padding-left: 300px;
    box-sizing: border-box;
    min-height:300px;
    background:#ff0;
  }
</style>
</head>
<body>
  <div class="box">
    <div class="left">我属于左边</div>
    <div class="right">我属于右边</div>
  </div>
</body>
</html>

2. 写一个弹窗,怎么居中弹窗里的元素?

这个问题平时写的比较多,但疏于整理现场只回答了一个方法,面试官希望有更多方法,现场另举了弹性布局,回来后整理了下,主要有以下四种方法:

1.居中浮动元素:

  • 1.1 利用margin负值
.son { 
  width:600px ; 
  height:300px;
  margin: -150px 0 0 -300px;
  position:absolute;/*父元素relative*/
  background-color:pink;
  left:50%;
  top:50%;
}
  • 1.2 利用translate
.father {
  width: 600px;
  height: 600px;
  position: relative;
  background-color: yellow;
}
.son {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
  • 1.3 利用弹性布局`
.father {
  width: 600px;
  height: 600px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son {
  width: 200px;
  height: 200px;
  background-color: blue;
}
  • 1.4 利用margin特性
.father {
  width: 600px;
  height: 600px;
  position: relative;
  background-color: yellow;
}
.son {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

2.内容居中:

.father{
  height: 100px;
  line-height:100px;
  text-align: center;
  background-color:pink;
}

或者:

.father{
  display:table-cell;/*对象作为表格单元*/
  vertical-align:middle;
  text-align:center;
  background-color:pink;
}