1. :befor和::befor區別
（1）相同點
--都可以用來表示偽類物件，設定物件前面的內容
--：befor和：：befor是等效的
（2）不同點
--：befor是css2的寫法，：：befor是css3的寫法。css2的相容性好
--h5開發中用：：befor好
-- 但冒號是css3偽類。雙冒號表示偽元素
2.盒模型 box-sizing
#盒模型
html文件中的元素會被描述成為矩形盒子，這個盒子通過盒模型顯示大小內容。margin , border , padding , content
ie盒模型和w3c標準盒模型。
ie ：寬高 = content + border + padding
標準 ： 寬高 = content
#box-sizing : content-box ( 預設 ) | border-box | inherit
content-box 相當於 w3c標準盒模型
border-box 相當於 ie盒模型
3.水平居中，垂直居中
#水平居中
(1) 子級div margin : 0 auto ;
(2) 父級div text-align : center ; 子級div display : inline-black ;
(3) 絕對定位法 ：
父級div position : relative ;
子級div position : absolute ;
left : 50% ;
margin-left : - ( 寬度 / 2 ) ; // 垂直也行
(4) flex ：
父級div display : flex ;
justify-centent : center ;
#垂直居中
(1) flex :
父級div display : flex ;
align-items : center ;
(2) 絕對定位 ：
-- left : 50% ; top : 50% ; margin : -寬高的一半
--top : 0 ; bottom : 0 ; margin : auto ;
--left : 50% ; top : 50% ; transform : translate ( -50% , -50% ) ;
(3) 使用 line-height 和 vertical-align 對進行垂直居中
父級 行高等於高 子級 vertical-align ： middle ;
#opacity設為0 ：
透明度為0。視覺上隱藏，元素仍然佔據空間，對布局和使用者互動起作用
#visibility : hidden ;
佔據空間，但對使用者互動無作用
#display : none ;
完全不存在。dom可操作
#position 出介面
#clic-path
5.css3新特性
#邊框
border-image border-radius box-shadow
#背景background-clip 規定背景的繪製區域
background-origin 規定背景的定位區域
background-size 規定背景尺寸
#漸變--線性漸變（linear gradients）下|上|左|右|對角
--徑向漸變
#文字效果
屬性描述
csshanging-punctuation
規定標點字元是否位於線框之外。
3punctuation-trim
規定是否對標點字元進行修剪。
3text-align-last
設定如何對齊最後一行或緊挨著強制換行符之前的行。
3text-emphasis
向元素的文字應用重點標記以及重點標記的前景色。
3text-justify
規定當 text-align 設定為 "justify" 時所使用的對齊方法。
3text-outline
規定文字的輪廓。
3text-overflow
規定當文字溢位包含元素時發生的事情。
3text-shadow
向文字新增陰影。
3text-wrap
規定文字的換行規則。
3word-break
規定非中日韓文字的換行規則。
3word-wrap
允許對長的不可分割的單詞進行分割並換行到下一行。
3#字型
#轉換變形
property
描述css
transform
適用於2d或3d轉換的元素
3transform-origin
允許您更改轉化元素位置
2d函式
描述matrix(n,
n,n,
n,n,
n)定義 2d 轉換，使用六個值的矩陣。
translate(x,
y)定義 2d 轉換，沿著 x 和 y 軸移動元素。
translatex(n)
定義 2d 轉換，沿著 x 軸移動元素。
translatey(n)
定義 2d 轉換，沿著 y 軸移動元素。
scale(x,
y)定義 2d 縮放轉換，改變元素的寬度和高度。
scalex(n)
定義 2d 縮放轉換，改變元素的寬度。
scaley(n)
定義 2d 縮放轉換，改變元素的高度。
rotate(
angle
)定義 2d 旋轉，在引數中規定角度。
skew(
x-angle
,y-angle
)定義 2d 傾斜轉換，沿著 x 和 y 軸。
skewx(
angle
)定義 2d 傾斜轉換，沿著 x 軸。
skewy(
angle
)定義 2d 傾斜轉換，沿著 y 軸。
3d轉換屬性
屬性描述
csstransform
向元素應用 2d 或 3d 轉換。
3transform-origin
允許你改變被轉換元素的位置。
3transform-style
規定被巢狀元素如何在 3d 空間中顯示。
3perspective
規定 3d 元素的透視效果。
3perspective-origin
規定 3d 元素的底部位置。
3backface-visibility
定義元素在不面對螢幕時是否可見。
33d轉換方法
函式描述
matrix3d(n,
n,n,
n,n,
n,n,
n,n,
n,n,
n,n,
n,n,
n)定義 3d 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,
y,z)
定義 3d 轉化。
translatex(x)
定義 3d 轉化，僅使用用於 x 軸的值。
translatey(y)
定義 3d 轉化，僅使用用於 y 軸的值。
translatez(z)
定義 3d 轉化，僅使用用於 z 軸的值。
scale3d(x,
y,z)
定義 3d 縮放轉換。
scalex(x)
定義 3d 縮放轉換，通過給定乙個 x 軸的值。
scaley(y)
定義 3d 縮放轉換，通過給定乙個 y 軸的值。
scalez(z)
定義 3d 縮放轉換，通過給定乙個 z 軸的值。
rotate3d(x,
y,z,
angle
)定義 3d 旋轉。
rotatex(
angle
)定義沿 x 軸的 3d 旋轉。
rotatey(
angle
)定義沿 y 軸的 3d 旋轉。
rotatez(
angle
)定義沿 z 軸的 3d 旋轉。
perspective(n)
定義 3d 轉換元素的透視檢視。
#過渡屬性
描述css
transition
簡寫屬性，用於在乙個屬性中設定四個過渡屬性。
3transition-property
規定應用過渡的 css 屬性的名稱。
3transition-duration
定義過渡效果花費的時間。預設是 0。
3transition-timing-function
規定過渡效果的時間曲線。預設是 "ease"。
3transition-delay
規定過渡效果何時開始。預設是 0。
3
前端面試 前端面試總結2018 07
2周面試了11家公司吧，具體面試題如下 面試第一周 7.23 7.27 中谷芯厚建 蘇寧vivo外包 電面 杭州通策會 第二週 7.30 8.3 南京軟體谷研究院 烽火科技 邁特望，蘇寧外包 電面 平安科技外包 華泰 外包 一輪 技術面，二輪現場技術面 三隻松鼠 電面 一.中谷芯 二.厚建 angu...
前端面試 前端面試題300道
jsonp是如何產生的 1 乙個眾所周知的問題，ajax直接請求普通檔案存在跨域無許可權問題，甭管你是靜態頁面 動態頁面 web伺服器，wcf，只要是跨域請求，一律不准。2 不過我們又發現，web頁面上呼叫js檔案時則不受是否跨域的影響 不僅如此，我們還發現凡是擁有 src 這個屬性的標籤都擁有跨域...
前端面試總結
最近打算換乙個新工作所有總結了一些面試的知識點，希望能幫到大家。廢話不多說直接上內容。1.width calc 100 2px 四則運算 vw viewpoint width，視窗寬度，1vw等於視窗寬度的1 vh viewpoint height，視窗高度，1vh等於視窗高度的1 height 1...