昨天面試之CSS

鄭明遠發表於2019-02-20
面試CSS

昨天進行了視訊面試，不出所料，涼涼。但不會的知識還是要學滴。

昨天面試之CSS

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時，還要查一下，但面試時，可不能這樣，所以我整理了圖，要熟練於心，紅色代表預設值：

昨天面試之CSS

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基本屬性的熟練程度，所以應多複習一下基本屬性。

position 共有6個屬性值： static | relative | absolute | fixed | sticky | inherit

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，這也許跟面試的部門有關吧。

相關文章