CSS3新特性有哪些？
- 選擇器類
- first-child
- last-child
- nth-child
- :checked
- 文字樣式
- @font-face
@font-face{ font-family:BorderWeb; src:url(BorderWeb.eot) } .border{ font-family:"BorderWeb" }- text-overflow & white-space & word-warp
.ellipsis{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; } - text-decoration為文本添加下劃線 默認值none
- 邊框，背景 樣式
- 圓角 border-radius,四個參數 從上左到下右 4個方位
- 漸變
-
線性漸變
linear-gradient(left,#333,#999)(默認是從上到下) 第一個參數為方位，可以是對角,如left to。也可以是角度，注意這里是順時鐘，如180deg就是從下到上 -
徑向漸變
adial-gradient(center,circle,yellow 10%,bule 30%) 陰影，box-shadow.反射,box-reflect
背景，background-clip
-
布局
- 彈性盒子
動畫，過渡
-
HTML有哪些新特性？
- 新增標簽
<header>
<footer>
<nav>
<section>
<artical>
<aside>
time - 用于繪畫的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持 Local storge，sessionStorage
- 新的表單控件，比如 calendar、date、time、email、url、search，移動端體驗更好
- 新增獲取地理位置，上傳文件等API
localStorage,sessionStorage,cookie 的區別
- localStorage 用于持久化的本地存儲，關閉頁面還有，除非主動刪除，否則一直存在，存儲量大
- sessionStorage 不是持久化的本地存儲，關閉頁面就會自動刪除
- cookie 是與服務器交互的，作為http規范的一部分而存在，在瀏覽器和服務器之間來回，存儲量小
如何優化頁面速度，提高頁面響應
- 取消重定向，原因是網站都會首先加載一個空白的頁面，然后在定向到另外的頁面。
- 合并javaScript
- 合并css
- 使用css sprite
- 啟用GZIP
- css,js引入文件位置，css放在<head>里面，js放在尾部
- img標簽要添加alt屬性
- 清除無效的a標簽，并給a標簽加上title屬性
- 緩存靜態資源
- 不用iframe/frame
- 減少DNS域名查找時間，將DNS的時間設置為較低的水平，比如60-100ms進行一次DNS查詢
如何提高前端性能
- 用webStorage代替cookie,可以減少HTTP請求的數據量
- 使用css3動畫，開啟GPU加速。translate3d()
- 緩存HTML標記
如何對網站的文件和資源進行優化
- 文件合并
- 文件最小化
- 使用cdn托管
- 緩存的使用
請簡單說明浮動和絕對定位的區別和應用。
- 二者都會脫離文檔流，并自動轉換為塊級元素。不同的是絕對定位的元素是按照瀏覽器的左上角計算的或者對設置相對定位的父元素開始的，它的脫離文檔流不占據空間，因此會產生覆蓋頁面上的其他元素，故有了z-index屬性。
- 浮動元素還是基于正常的文檔流，只是在文檔流中抽出，并盡可能的移動到最左側或者右側，文字內容會圍繞在浮動元素周圍，仍然在文檔流中的元素會替補原先的空間。
meta 元標簽基礎知識
- 將窗口調整為設備窗口，并禁止用戶縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" - 忽略頁面中的數字識別為電話號碼,Android平臺對郵箱的識別
<meta name="format-detection",content="telephone=no"> - 當網站添加到主屏幕快速啟動方式,以及頂部導航條樣式
<meta name="apple-mobile-wep-app-capable",content="yes">
<meta name="apple-mobile-web-app-status-bar-sytle",content="black">
說說移動端2欄布局，左側定寬，右側自適應的兩種方法
- HTML代碼
<div class="main">
<div class="left">左側固定</div>
<div class="right">右側自適應<div>
</div>
- 第一種方法，flex
.main{
display:flex;
}
.left{
width:100px;
height:400px;
}
.right{
flex:1;
height:400px;
}
- 第二種方法 定位+margin
*{
margin: 0;
padding: 0;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 400px;
}
.right {
margin-left: 100px;
height: 400px;
}
