-
html5中新增標籤
main section article footer header
好處：
a. 標籤自帶樣式
b. 便於搜索引擎優化
c. 可讀性強 -
css3 中新增內容
自定義動畫、文字陰影（text-shadow）、圓角邊框、邊框陰影（box-shadow）、過度（transition）
動畫中的屬性（animation）：animation-name(動畫名稱)、animation-duration(動畫執行一次所需時間)、animation-delay(動畫在開始前的延遲時間)、animation-timing-function(動畫以何種運行軌跡完成一個週期：linear、 ease-in 、ease-out)、animation-iteration-count(動畫播放次數)、animation-fill-mode(定義元素動畫結束以後或者未開始的元素樣式) 、animation-direction(是否輪流反向播放動畫) -
flex 彈性盒
flex佈局是什麼：彈性盒佈局
屬性及屬性值:- flex-direction:決定主軸的方向
a. row（默認值）：主軸爲水平方向，起點在左端
b. row-reverse:主軸爲水平方向，起點在右端
c. column:主軸爲垂直方向，起點在上沿
d. column-reverse:主軸爲垂直方向，起點在下沿 - justify-content決定主軸上的對齊方式：
a. flex-start（默認值）：左對齊
b. flex-end：右對齊
c. center：居中
d. space-between:兩端對齊，項目之間的間隔都相等
e. space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍 - align-items屬性:交叉軸上如何對齊
a. flex-start：交叉軸的起點對齊
b. flex-end:交叉軸的終點對齊
c. center：交叉軸的中點對齊
d. baseline：項目的第一行文字的基線對齊。
e. stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。 - align-content屬性:多根軸線的對齊方式
a. flex-start：與交叉軸的起點對齊。
b. flex-end：與交叉軸的終點對齊。
c. center：與交叉軸的中點對齊。
d. space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
e. space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
f. stretch（默認值）：軸線佔滿整個交叉軸。 - flex-wrap屬:換行
a. nowrap（默認）：不換行
b. wrap:換行，第一行在上方
c. wrap-reverse:換行，在第一行的下方 - 項目屬性：
a. order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。
b. flex-grow屬性定義項目的放大比例，默認值爲0，即如果存在剩餘空間，也不放大。
c. flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，改項目將縮小。
d. flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。
e. flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值爲0 1 auto。後面兩個屬性可選
f. align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，等同於stretch。
- flex-direction:決定主軸的方向
-
如何清除浮動？爲什麼要清除浮動？
clear：both；overflow:hidden 發生高度塌陷 -
常見的定位方式有哪些？
a. absolute 基於距離自己最近的一個非固定定位的元素進行定位
b. fixed 基於整個窗口
c. relatived 基於本身應該出現的位置 -
瀏覽器兼容性：
a.儘量不使用html5中新增的一些語義化標籤
b. 不使用css3中新增的內容
c. jQuery低版本
我們公司在做的時候主要使用360瀏覽器(兼容模式、極速模式)進行調試
html hack的方式針對不同版本的ie設置使用不同的樣式<!-- lt ie8 -- > -
css 常見的元素選擇器有哪些？計算規則（優先級，權重）
id class 標籤 僞類（nth-child；first-child；last-of-type()；nth-child()；not()）
!important：最高優先級 -
盒模型？(標準盒模型和怪異盒模型區別)
內容區域的計算方式不一樣（標準盒模型margin；padding；border；content：怪異盒模型content；margin）
box-sizing：content-box：標準盒模型解析方式；border-box：怪異盒模型解析方式 -
做移動端開發需要注意什麼？什麼是 viewport？
1.1、長時間按住頁面出現閃退element { -webkit-touch-callout: none; }
1.2 、iphone及ipad下輸入框默認內陰影：Element{ -webkit-appearance: none; }
1.3、active兼容處理 即 僞類 :active 失效:body添加ontouchstart<body ontouchstart="">
1.4、Retina屏的1px邊框Element{ border-width: thin; }
1.5、旋轉屏幕時，字體大小調整的問題*{ -webkit-text-size-adjust:100%; }
1.6、上下拉動滾動條時卡頓、慢body { -webkit-overflow-scrolling: touch; //蘋果手機 overflow-scrolling: touch; }
2.1、Viewport：就是你設備屏幕的可視寬度和高度；<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.2、如何禁止頁面雙指縮放？
viewport 禁止縮放屬性爲no，max-scale,min-scale -
怎麼實現一個選項卡的功能？點擊時設置顯示隱藏
-
如何實現模態窗口：第一個盒子實現背景：將整個頁面覆蓋（透明色）第二個盒子實現交互框。
-
如何實現一個鼠標移上之後圖片旋轉 360 度的效果？
2020最新前端面試題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
10分鐘教會你使用Zabbix6.0新聚合算法
感謝張宇投稿！張宇，Zabbix高級認證專家。 先賺它幾千元再說！Zabbix有獎投稿 1、Zabbix 6.0普通計算 計算監控項是創建虛擬數據源的一種方式。所有