1. 程式人生 > >前端面試常考知識點---CSS

前端面試常考知識點---CSS

前端面試常考知識點---js

1.CSS3的新特性有哪些

點我檢視

  1. CSS3選擇器 .
  2. CSS3邊框與圓角

    CSS3圓角border-radius:
    屬性值由兩個引數值構成: value1 / value2,值之間用/分隔,value1代表圓角的水平半徑,value2代表圓角的垂直半徑
    盒陰影box-shadow:
    語法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴充套件程度 顏色 是否具有內陰影
  3. CSS3背景與漸變

    重要的幾個:
    background-image

    ``` 語法:backgroundimage:url('1.jpg),url('2.jpg') ```

    background-origin

    ``` 定義:設定背景影象的原始起始位置 語法:background-origin:border-box / padding-box / content-box(背景圖片座標原點與這三個有關係) ```

    background-repeat

    ``` 定義:設定是否及如何重複背景影象,預設地,背景影象在水平和垂直方向上重複。 ```

    background-size

    ``` 定義:指定背景影象的大小 語法:background-size:number / % / cover / contain ```

    太多了,本寶寶休息一下再寫

  4. CSS3過渡
  5. CSS3變換
  6. CSS3動畫

2.flex

這篇講的很全
簡單易懂
一方面是在父容器的幾個屬性,另一些就是子元素的屬性


父:                                                                                  
    * flex-direction                                 子元素排列方向
    * flex-wrap                                        如果一條軸線排不下,如何換行
    * flex-flow                                         flex-direction屬性和flex-wrap屬性的簡寫形式
    * justify-content                               在主軸上的對齊方式
    * align-items                                     在交叉軸上如何對齊
    * align-content                                 多根軸線的對齊方式
子:
    * order
    * flex-grow
    * flex-shrink
    * flex-basis
    * flex
    * align-self

3.BFC

盒模型和BFC

  1. 內部的box會在垂直方向,一個接一個的放置
  2. 每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對於從做往右的格式化,否則相反)
  3. box垂直方向的距離由margin決定,屬於同一個bfc的兩個相鄰box的margin會發生重疊
  4. bfc的區域不會與浮動區域的box重疊
  5. bfc是一個頁面上的獨立的容器,外面的元素不會影響bfc裡的元素,反過來,裡面的也不會影響外面的
  6. 計算bfc高度的時候,浮動元素也會參與計算

怎麼建立bfc

  1. float屬性不為none(脫離文件流)
  2. position為absolute或fixed
  3. display為inline-block,table-cell,table-caption,flex,inine-flex
  4. overflow不為visible
  5. 根元素

應用場景

  1. 自適應兩欄佈局
  2. 清除內部浮動
  3. 防止垂直margin重疊

    為什麼overflow:hidden可以消除margin合併?

    我們首先要搞清楚為什麼會發生margin合併。這些元素(包括兄弟、父子元素等)之間之所以會發生margin合併,是因為它們屬於同一個BFC。所以,我們就知道怎麼辦了,只要讓它們不屬於同一個BFC不就可以了?通過overflow:hidden建立了一個BFC

    為什麼overflow:hidden可以清除浮動的影響?

    當給.parent設定"overflow:hidden"時,實際上建立了一個超級屬性BFC,此超級屬性反過來決定了"height:auto"是如何計算的。在“BFC佈局規則”中提到:計算BFC的高度時,浮動元素也參與計算。因此,父元素在計算其高度時,加入了浮動元素的高度,“順便”達成了清除浮動的目標,所以父元素就包裹住了子元素。

    為什麼overflow:hidden...

  4. link、import、require的區別
    import和require

    require是執行時呼叫,所以require理論上可以運用在程式碼的任何地方
    import是編譯時呼叫,所以必須放在檔案開頭

    link和import

    當一個頁面被載入的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被載入,而@import引用的CSS會等到頁面全部被下載完再載入。所以有時候瀏覽@import載入CSS的頁面時會沒有樣式(就是閃爍),網速慢的時候還挺明顯。

原文地址:https://segmentfault.com/a/1190000017257916