flex布局詳解
flex布局就是彈性布局，用來給盒裝模型提供最大的靈活性，可以直接給容器設定display：flex，行內元素display：inline-flex
flex在容器上有五個屬性
1.flex-direction決定主軸的方向，有四個api
row：預設值，水平方向從左到右
row-reverse：水平方向從右到左
column：垂直方向從上到下
column-reverse：垂直方向從下到上
.box
2.flex-wrap
no-wrap：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方
3.justify-content決定了主軸的對齊方式
center：居中
flex-start：從左到右
flex-end：從右到左
space-between：兩端對齊，中間的專案間隔相同
space-around：每個專案的間隔相同
4.align-items決定交叉軸的方式
center：居中
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊
baseline：專案的第一行文字對齊
stretch：預設值，如果未設定高度或者設為auto，將撐滿整個高度
5.align-content定義了多根軸線的對齊方式，如果只有一根軸線該屬性不起作用
center：與交叉軸的中點對齊
flex-start：與交叉軸的起點對齊
flex-end：與交叉軸的終點對齊
space-between：與交叉軸兩端對齊，軸線之間的間隔相同
space-around：兩端與邊框的距離是中間各個軸線之間的一半
stretch：預設值，軸線佔滿整個交叉軸
專案屬性有6個：order，flex-grow，flex-shrink，flex-basis，flex，align-self
order：定義專案的排列順序，數值越小，越靠前，預設為0
flex-grow：定義放大的比例，預設為0，如果是1，就等分
flex-shrink：定義縮小的比例，預設為1，即就是空間不足，縮小，負值無效
flex是flex-grow，flex-shrink，flex-basis的簡寫，預設為 0， 1， auto
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
display：none（不佔空間）
visibility：hidden
opacity：0
重排重繪詳解
1.html 被 html 解析器解析成 dom 樹；
2.css 被 css 解析器解析成 cssom 樹；
3.結合 dom 樹和 cssom 樹，生成一棵渲染樹(render tree)，這一過程稱為 attachment；
4.生成布局(flow)，瀏覽器在螢幕上「畫」出渲染樹中的所有節點；
5.將布局繪製(paint)在螢幕上，顯示出整個頁面。
第四步和第五步是最耗時的部分，這兩步合起來，就是我們通常所說的渲染。
安全問題詳解
2018 8 20 360 前端面經
1.自我介紹 2.專案試玩 難點 技術棧 3.如何實現地圖 分層 一層如何實現 資料結構，類似 4.如何實現元件間通訊 on,emit,全域性變數 5.websocket遇到的問題，如何除錯 6.碰撞檢測如何實現 資料結構 8.兩欄布局 越多越好 9.settimeout原理 事件迴圈 10.事件繫...
小公尺 前端面經
二分查詢,返回查詢元素的索引function binary search arr,low,high,key var mid parseint high low 2 if arr mid key else if arr mid key else if arr mid key var arr 1,2,3...
作業幫前端面經
實習做的事情以及收穫 webpack優化 為什麼webpack可以識別es6的import es6 模組化 common.js特點 盒模型js基本資料型別 接下來就是 題 附加乙個url解析為object function urltoobj url let arr2 url.split arr2.m...