面向面試之 CSS 篇

拾夕發表於2019-04-06

1. 兩種盒模型分別說一下 (必考)

box-sizing:border-box; // IE 盒模型
box-sizing:content-box;  //標準盒模型
複製程式碼

我比較喜歡用哪一種,為什麼,隨便說個理由,順手了。

盒模型 MDN

2. 如何垂直居中?(必考)

個人總結的垂直居中方法

實際上 Flex 可以實現完美,也是我最常用的一種。

3. flex 怎麼用,常用屬性有哪些?(必考)

MDN Flex 參考

Flex 佈局教程 阮一峰

4. BFC 是什麼?(必考)

塊級格式化上下文 BFC 完整參考 MDN

BFC 觸發條件

  1. 浮動元素(元素的 float 不是 none)
  2. 絕對定位元素(元素的 position 為 absolute 或 fixed)
  3. 行內塊元素
  4. overflow 值不為 visible 的塊元素
  5. 彈性元素(display為 flex 或 inline-flex元素的直接子元素)

5. CSS 選擇器優先順序

  1. 越具體優先順序越高
  2. 同樣優先順序寫在後面的覆蓋寫在前面的
  3. !important 優先順序最高,但是要少用

6. 清除浮動說一下

背程式碼,父元素加上 clearfix 類

 .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
    zoom: 1; /* IE 相容*/
 }
複製程式碼

後記

只提供個人找到或者總結的答案,想要深入瞭解,請自己 mdn 搜相關知識點。

轉載請註明出處,謝謝。

個人總結,不足之處還請指出。

以上

相關文章