1. css3新特性
（1）border-radius（圓角），box-shadow（陰影），text-shadow（文字陰影特效）
（2）background:linear-gradient（線性漸變），radial-gradient（徑向漸變），background多背景、size、orgin等
（3）[transform](#go)
（4）rgba，opacity
（5）@media
（6）更多選擇器，如nth-child等子元素選擇器，:enabled、:disabled（表單控制項的禁用狀態），:checked（選擇框被選中）
（7）@keyframes animation動畫
（8）過渡效果transition: property duration timing-function delay;
（9）盒模型、彈性布局；
（10）偽元素選擇器由 : 改為 ::
@support(display:flex)
}
@media screen and (max-width: 300px)
}
.box
3. css水平、垂直居中的寫法
水平居中：
行內元素：text-align:center;
塊級元素：display:flex;justify-content:center;
margin:0 auto;
position:absolute;left:50%;transform:translatex(-50%);
在螢幕中居中margin-left:50vh;transform:translatex(-50%);
diaplay:table;vertical-align:middle;
ling-height
display:flex;align-item:center;
position:absoult;top:50%;transform:translatey(-50%);
在螢幕中居中margin-top:50vh;transform:translatey(-50%);
px：相對長度單位，相對於螢幕解析度而言的；
rpx：解決自適應螢幕尺寸的長度單位，100%寬度為750rpx,若螢幕寬度375px,則1px = 2rpx;
em: 相對長度單位，相對當前節點文字的尺寸而言的，當前文字為font-size:18px;則1em = 18px;
rem: 根em，相對於根節點的文字尺寸而言，html;則1rem = 30px;
vw: 1vw為1%螢幕寬度（window.innerwidth）；
vh: 1vh為1%螢幕高度（window.innerheight）；
vmin: 選取vw和vh中最小的那個；
vmax: 選取vw和vh中最大的那個；
translate移動；translate(x,y) translatex() translatey();
scale縮放； scale(x,y) scalex() scaley();
rotate旋轉； rotate(x,y) rotatex() rotatey();
skew傾斜；skew(x-angle,y-angle) skewx() skewy();
content、padding、border、margin
wsc盒子：box-sizing:content-box; width表示到content這一層的寬度；
ie盒子：box-sizing:border-box; width表示到border這一層的寬度；
.box(1) clear:both;
(2) 父元素 overflow:hidden/auto/scroll;
overflow:hidden;在一定條件下會形成bfc：
bfc：格式化上下文，形成乙個獨立的渲染區域；
條件：浮動元素，定位元素（position:absolute/fixed），display:inline-block/table-cell/table-caption;
特性：不存在margin穿透，浮動元素參與高度計算，內部元素不影響外部元素；
font字型系列
text文字系列
元素可見性：visibility
游標屬性：cursor
生成內容屬性：quotes
**布局屬性：table-layout等屬性
列表布局屬性：list-style等屬性
頁面樣式屬性：page、windows等屬性
聲音樣式屬性：speak、volume、pitch等屬性
（1）!important
（2）行內樣式（內聯樣式）
（3）id選擇器
（4）class選擇器 > 屬性選擇器 > 偽類選擇器
（5）標籤選擇器 > 關係選擇器 > 偽元素選擇器
（6）萬用字元選擇器（*）
duration動畫週期，以秒或毫秒為單位，多數顯示器預設頻率是60hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms;
12. display有哪些值
（1）none 不顯示
（2）block 塊級元素，帶換行符
（3）inline 內聯元素，不帶換行符
（4）inline-block 行內塊元素，具有兩者特性
（5）list-item 列表元素
（6）run-in 根據上下文決定作為內聯元素還是塊級元素
（7）table 塊級**
（8）inline-table 內聯**
（9）table-*** **相關值
（10）inherit 不定義，從父元素繼承
（1）直接隱藏
display:none; 不佔空間，無法點選
visibility:hidden; 佔空間，無法點選
（2）透明度隱藏
opactiy:0; 佔空間，可以點選
filter:opactiy(0); 佔空間，可以點選
background:transparent; 佔空間，可以點選
（3）移出螢幕
絕對定位移出 不佔空間，無法點選
相對定位移出 佔空間，無法點選
margin移出 佔空間，無法點選
trandform trandlate移出 佔空間，無法點選 scale縮放 不佔空間，無法點選
用專門的程式語言進行web樣式設計，再通過編譯器轉化為正常的css檔案；
相對於css增加了混入（已存在的樣式混入到別的樣式中）、巢狀、變數、運算、js賦值等特性；
（1）環境：sass安裝需要ruby環境，less是基於js，需要引入less.js來處理**輸出css；（less環境比較簡單）
（2）語法：less沒有裁剪css原有的特性，語法相對簡單；
（3）功能：sass功能相對強大，變數具有作用域，具有程序控制（@if、@else、@importent、@extend、@for、@each、@while），有函式和資料結構的概念；
（4）處理機制：less客戶端處理，sass服務端處理；
scss是sass的公升級版本，完全相容sass；
最大區別是語法上，sass要求嚴格的縮排，沒有{}和分號，巢狀靠縮排表示；
scss不要求縮排，有{}和；，巢狀靠{}表示，是css3語法的拓展級，即每乙個語法正確的css3檔案也是合法的scss檔案；
前端面試1 CSS布局
複製 float 不可用 absolute 不可用 flex 可用 table 可用 grid 不可用 與左右固定，中自適應的三欄布局 複製 做法 把要居中的元素的margin left和margin right都設為auto 場景 只能進行水平的居中，且對浮動元素或絕對定位元素無效。場景 只能對，...
全網前端面試題彙總（5）Vue
1.mvc和mmvm mvc model view controller 模型 檢視 控制器 model 模型 處理資料邏輯的部分 view 檢視 處理資料顯示的部分 controller 控制器 處理使用者互動的部分 mvc的思想 controller負責將model的資料用view顯示出來 in...
前端面試題彙總 CSS篇
1 css 中類 classes 和 id 的區別 對於css而言，id和class都是選擇器，唯一不同的地方在於權重不同。對於html而言，id和class都是dom元素的屬性值。不同的地方在於id屬性的值是唯一的，而class屬性值可以重複。id還乙個老特性是錨點功能，當瀏覽器位址列有乙個 頁面...