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,四個參數(shù) 從上左到下右 4個方位
- 漸變
-
線性漸變
linear-gradient(left,#333,#999)(默認(rèn)是從上到下) 第一個參數(shù)為方位揖铜，可以是對角,如left to污淋。也可以是角度嫉晶，注意這里是順時鐘，如180deg就是從下到上 -
徑向漸變
adial-gradient(center,circle,yellow 10%,bule 30%) 陰影敛滋，box-shadow.反射,box-reflect
背景许布，background-clip
-
布局
- 彈性盒子
動畫，過渡
-
HTML有哪些新特性绎晃？
- 新增標(biāo)簽
<header>
<footer>
<nav>
<section>
<artical>
<aside>
time - 用于繪畫的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持 Local storge蜜唾，sessionStorage
- 新的表單控件，比如 calendar庶艾、date袁余、time、email咱揍、url颖榜、search，移動端體驗更好
- 新增獲取地理位置煤裙，上傳文件等API
localStorage,sessionStorage,cookie 的區(qū)別
- localStorage 用于持久化的本地存儲掩完，關(guān)閉頁面還有，除非主動刪除硼砰，否則一直存在且蓬，存儲量大
- sessionStorage 不是持久化的本地存儲，關(guān)閉頁面就會自動刪除
- cookie 是與服務(wù)器交互的题翰，作為http規(guī)范的一部分而存在恶阴，在瀏覽器和服務(wù)器之間來回，存儲量小
如何優(yōu)化頁面速度豹障，提高頁面響應(yīng)
- 取消重定向冯事，原因是網(wǎng)站都會首先加載一個空白的頁面，然后在定向到另外的頁面沼填。
- 合并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域名查找時間，將DNS的時間設(shè)置為較低的水平荚虚，比如60-100ms進(jìn)行一次DNS查詢
如何提高前端性能
- 用webStorage代替cookie,可以減少HTTP請求的數(shù)據(jù)量
- 使用css3動畫薛夜，開啟GPU加速。translate3d()
- 緩存HTML標(biāo)記
如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化
- 文件合并
- 文件最小化
- 使用cdn托管
- 緩存的使用
請簡單說明浮動和絕對定位的區(qū)別和應(yīng)用版述。
- 二者都會脫離文檔流梯澜，并自動轉(zhuǎn)換為塊級元素。不同的是絕對定位的元素是按照瀏覽器的左上角計算的或者對設(shè)置相對定位的父元素開始的渴析，它的脫離文檔流不占據(jù)空間晚伙，因此會產(chǎn)生覆蓋頁面上的其他元素吮龄，故有了z-index屬性。
- 浮動元素還是基于正常的文檔流咆疗，只是在文檔流中抽出漓帚，并盡可能的移動到最左側(cè)或者右側(cè)，文字內(nèi)容會圍繞在浮動元素周圍午磁，仍然在文檔流中的元素會替補原先的空間尝抖。
meta 元標(biāo)簽基礎(chǔ)知識
- 將窗口調(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ù)字識別為電話號碼,Android平臺對郵箱的識別
<meta name="format-detection",content="telephone=no"> - 當(dāng)網(wǎng)站添加到主屏幕快速啟動方式,以及頂部導(dǎo)航條樣式
<meta name="apple-mobile-wep-app-capable",content="yes">
<meta name="apple-mobile-web-app-status-bar-sytle",content="black">
說說移動端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;
}
