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