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

騫諱護發布于2019-08-29 17:30 / 2611人閱讀

摘要：在布局規則中提到計算的高度時，浮動元素也參與計算。因此，父元素在計算其高度時，加入了浮動元素的高度，順便達成了清除浮動的目標，所以父元素就包裹住了子元素。

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

1.CSS3的新特性有哪些

點我查看

CSS3選擇器 .

CSS3邊框與圓角

CSS3圓角border-radius:
屬性值由兩個參數值構成: value1 / value2，值之間用/分隔，value1代表圓角的水平半徑，value2代表圓角的垂直半徑
盒陰影box-shadow:
語法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內陰影

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

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

CSS3過渡

CSS3變換

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

內部的box會在垂直方向，一個接一個的放置

每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從做往右的格式化，否則相反）

box垂直方向的距離由margin決定，屬于同一個bfc的兩個相鄰box的margin會發生重疊

bfc的區域不會與浮動區域的box重疊

bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc里的元素，反過來，里面的也不會影響外面的

計算bfc高度的時候，浮動元素也會參與計算

怎么創建bfc

float屬性不為none（脫離文檔流）

position為absolute或fixed

display為inline-block,table-cell,table-caption,flex,inine-flex

overflow不為visible

根元素

應用場景

自適應兩欄布局

清除內部浮動

防止垂直margin重疊

為什么overflow:hidden可以消除margin合并？

我們首先要搞清楚為什么會發生margin合并。這些元素（包括兄弟、父子元素等）之間之所以會發生margin合并，是因為它們屬于同一個BFC。所以，我們就知道怎么辦了，只要讓它們不屬于同一個BFC不就可以了？通過overflow:hidden創建了一個BFC

為什么overflow:hidden可以清除浮動的影響？

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

為什么overflow:hidden...

link、import、require的區別
import和require

require是運行時調用，所以require理論上可以運用在代碼的任何地方
import是編譯時調用，所以必須放在文件開頭

link和import

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

GPU云服務器云服務器 java 面試知識 java面試集合知識前端面試前端知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114364.html

前端事件綁定知識點（面試常考）

摘要：事件通常與函數配合使用，當事件發生時函數才會執行。的事件流是事件捕獲流，事件由根元素獲取并沿樹向下分發。通過添加事件，只能用刪除此事件。這主要得益于瀏覽器的事件冒泡機制。簡介事件是可以被 JavaScript 偵測到的行為。網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。事件通常與函數配合使用，當事件發生時函數才會執行。執行JS 事件的方式： ...

liujs 2019-08-20 18:16 評論0 收藏0
前端事件綁定知識點（面試常考）

摘要：事件通常與函數配合使用，當事件發生時函數才會執行。的事件流是事件捕獲流，事件由根元素獲取并沿樹向下分發。通過添加事件，只能用刪除此事件。這主要得益于瀏覽器的事件冒泡機制。簡介事件是可以被 JavaScript 偵測到的行為。網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。事件通常與函數配合使用，當事件發生時函數才會執行。執行JS 事件的方式： ...

wizChen 2019-08-01 17:14 評論0 收藏0
前端面試常考知識點---js

摘要：上面實現了遞歸調用，這樣做的好處是在前一個定時器代碼執行完成之前，不會向隊列插入新的定時代碼，確保不會有任何的缺失間隔。而且，它保證在下一次定時器代碼執行之前，至少要等待指定的時間間隔。 1.同步和異步詳細～文章總結： setTimeout(fn,ms)這個函數，是經過指定時間后，把要執行的任務加入到Event Queue中，又因為是單線程任務要一個一個執行，如果前面的任務需要的時間...

BingqiChen 2019-08-26 11:51 評論0 收藏0
前端秋招面試總結

摘要：前言秋招宣告結束，面試了接近家公司，有幸拿到，感謝這段時間一起找工作面試的朋友和陪伴我的人。一定要提前準備好，不然面試官叫你說遇到的難點，或者直接問問題時可能會懵逼。前言秋招宣告結束，面試了接近20家公司，有幸拿到offer，感謝這段時間一起找工作面試的朋友和陪伴我的人。這是一段難忘的經歷，相信不亞于當年的高考吧，也許現在想起來高考不算什么，也許只有經歷過秋招的人才懂得找工作的艱辛...

Gu_Yan 2019-08-02 12:04 評論0 收藏0