昨天面试之CSS昨天进行了视频面试，不出所料，凉凉。但不会的知识还是要学滴。 flex-shrink默认是1，代表如果空

昨天进行了视频面试，不出所料，凉凉。但不会的知识还是要学滴。

Problem 1

实现左侧自适应，右侧固定 100px 布局

flex方案

<div class="fa">
  <div class="left">123</div>
  <div class="right">456</div>
</div>

.fa {
  display: flex;
}
.left {
  flex-grow: 1;
}
.right {
  flex: 0 0 100px;
}

flex-grow 默认是0，代表有剩余空间，也不会扩大本身的空间，这里1代表有剩余空间，就要扩大本身的宽度

flex-shrink默认是1，代表如果空间不足，那缩小本身的空间，这里0代表如果空间不足，不会缩小本身空间。

我用flex时，还要查一下，但面试时，可不能这样，所以我整理了图，要熟练于心，红色代表默认值：

float方案

<div class="fa">
  <div class="left">123</div>
  <div class="right">456</div>
</div>

.fa {
  position: relative;
}
.left {
  margin-right: 100px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px; 
}

这种实现不太好，因为如果 100px 变为 200px ，那需要修改2处。As a smart programmer, we should achieve it with a more elegant approach.

BFC方案

<div class="fa">
  <div class="right">456</div>
  <div class="left">123</div>
</div>

.left {
  overflow: hidden;
}
.right {
  float: right;
  width: 100px; 
}

参考《CSS世界》160页。这里right写在left上面，为了使用文档流。这里只要改变一处就可以实现效率啦。

Problem 2

使用CSS3实现围绕自身中轴持续旋转的圆形

这里就代表应该清楚：2D 3D变换、animation transition使用等。

<div class="fa">Hello</div>
.fa {
  width: 200px;
  height: 200px;
  background-color: #f00;
  border-radius: 50%;
  animation: mymove 2s infinite linear;
}

@keyframes mymove {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

这里还还可以考贝塞尔曲线等。

Problem 3

position的属性有几种，分别介绍一下

这题你肯定不能只看 position 这个属性了，它代表的是CSS基本属性的熟练程度，所以应多复习一下基本属性。

static 默认值

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative

生成相对定位的元素，相对于其正常位置进行定位。保留原来的空间

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。 尺寸不够也不会产生滚动条

sticky

基于用户的滚动位置来定位。在 position:relative 与 position:fixed 定位之间切换

inherit

只从父元素继承 position 属性的值，不会管父级以上的position

Summary

我挂在2面的，确实有些问题没答上来，还是应该更注重基础和实践吧，但还是感觉好亏啊，这几天看的ts和网络一点都没问，反倒我认为不太重要的css和动画大约问了1/3，这也许跟面试的部门有关吧。