1. Hover時(shí)位移的一個(gè)較好方案
- 要求：鼠標(biāo)指針懸浮時(shí)既可以實(shí)現(xiàn)某個(gè)方向的位移堡牡，又能有個(gè)漸進(jìn)效果（不那么突兀）
- 本人實(shí)測(cè)（由于能力有限難免會(huì)有錯(cuò)誤之處），最好的方案是：
http://js.jirengu.com/laceg/6/edit
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="hover滑動(dòng)模型" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="child">
<div class="box"></div>
</div>
</div>
</body>
</html>
.parent {
width: 200px;
height: 400px;
border: 2px solid;
}
.box {
margin-top: 200px;
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: #03a9f4;
/* border: 1px solid #fff; */
transition: all .5s;
}
.child {
border: 1px solid red;
}
.child:hover .box{
transform: translateY(-200px);
/* margin-top: 0px; */
}
- 其中要點(diǎn)（由于能力有限難免會(huì)有錯(cuò)誤之處）為：
-
.child:hover .box
這個(gè)選擇器很重要樱溉，如果只是按習(xí)慣寫成.box:hover，會(huì)發(fā)現(xiàn)滑塊像得了帕金森一樣吹缔，狂抖端三。我認(rèn)為這是因?yàn)槭髽?biāo)懸浮位置變了，所以瀏覽器要重新讀取數(shù)據(jù)细卧，因此會(huì)下移再上移。故較好的解決方案是給外層的父容器設(shè)置hover筒占，后面再選擇要移動(dòng)的滑塊（即.child:hover .box）贪庙。
ps:你會(huì)發(fā)現(xiàn)例子中你把鼠標(biāo)放到方框的空白處，滑塊也會(huì)移動(dòng)翰苫，那是因?yàn)?code>.child被.box的margin撐開(kāi)了（紅線框）止邮。本例為了體現(xiàn)一些關(guān)于-margin和transform的區(qū)別，刻意多設(shè)margin奏窑，才出現(xiàn)了這種情況导披，實(shí)際問(wèn)題應(yīng)具體問(wèn)題具體分析。就本人目前使用來(lái)看埃唯，實(shí)際沒(méi)有出現(xiàn)這種問(wèn)題撩匕。 -
transform: translateY(-200px);與負(fù)的margin
負(fù)的margin由于存在垂直方向外邊距合并問(wèn)題，總會(huì)在hover位移時(shí)導(dǎo)致帕金森墨叛，面對(duì)這種問(wèn)題止毕，用border來(lái)分析是最好的辦法∧茫看例子中如果改用負(fù)的margin扁凛，會(huì)發(fā)現(xiàn)紅線框一起跟著上移，這就是外邊距合并的情況闯传。本人在WOW網(wǎng)頁(yè)實(shí)戰(zhàn)中便碰到了這種情況谨朝！
解決方法是使用transform: translateY(-200px);，這個(gè)方法目前來(lái)看沒(méi)什么副作用。 - 還有個(gè)方法
positon:relative;top.......但就本人目前測(cè)試來(lái)看字币，transition（注意是transition而不是transform）對(duì)這個(gè)屬性不生效则披，無(wú)法實(shí)現(xiàn)漸進(jìn)效果，故放棄纬朝。 - transition最好別寫給hover時(shí)的屬性下收叶，否則只能實(shí)現(xiàn)“來(lái)”時(shí)漸進(jìn)，無(wú)法實(shí)現(xiàn)“去”時(shí)亦漸進(jìn)共苛。
-
- 綜上所述
transition寫給需要移動(dòng)的標(biāo)簽的非hover態(tài)
使用hover時(shí)寫給父容器判没，后面跟上該標(biāo)簽：.child:hover .box
位移使用transform: translateY(-200px);。（XY和+-均可變）
2.引入字體
推薦網(wǎng)站（英文字體）：http://www.googlefonts.cn/#
搜索字體后點(diǎn)擊Quick-use,然后勾選需要的類型（粗細(xì)正斜等）隅茎，然后復(fù)制link到<head>...</head>中即可澄峰。
- 心得：若字體用的地方比較多，設(shè)個(gè)專有class既省事辟犀，又能讓代碼優(yōu)雅俏竞。
3. 布局
先縱觀頁(yè)面考慮好各個(gè)部分的同與異再進(jìn)行布局是最好的。
相同的部分用統(tǒng)一的class進(jìn)行設(shè)置堂竟。雖然之前學(xué)習(xí)過(guò)程中被強(qiáng)調(diào)過(guò)這點(diǎn)魂毁，但實(shí)際獨(dú)立作業(yè)時(shí)，才發(fā)現(xiàn)這點(diǎn)有多么重要出嘹。
4. Hover時(shí)透明膜覆蓋
先寫個(gè)rgba背景色席楚，opacity設(shè)置成0；
hover時(shí)税稼，opacity設(shè)置成想要的狀態(tài)烦秩。
5. Form中placeholder內(nèi)的樣式設(shè)置
::-webkit-input-placeholder: {
}
6. Font簡(jiǎn)寫
font: style(formal/italic)——variant——weight(數(shù)字或bold)——size/line-height——family;
7. 本地添加Iconfont字體文件
下載后，把4個(gè)iconfont開(kāi)頭的不同格式文件放到html cssd代碼所在的文件夾下郎仆，打開(kāi)iconfont.css只祠，把@聲明復(fù)制過(guò)去。注意扰肌，若文件統(tǒng)一放到文件夾中抛寝，則要修改聲明中的路徑。注意路徑分隔用/狡耻。
本地文件用VScode在Chrome打開(kāi)后墩剖，在線iconfont鏈接無(wú)法使用，必須使用本地連接夷狰。
8. Github使用過(guò)程中pull不下來(lái)的問(wèn)題
一般是因?yàn)闆](méi)有指定當(dāng)前當(dāng)前工作目錄工作分支岭皂，跟遠(yuǎn)程的倉(cāng)庫(kù)、分支之間的關(guān)系沼头。
輸入git branch --set-upstream master origin/master（對(duì)應(yīng)origin master）即可爷绘。
9. 百分比高度
若一個(gè)標(biāo)簽寫了百分比高度书劝，那么它的各個(gè)父級(jí)都需要寫上百分比高度墅拭。
10.Iconfont的字體圖標(biāo)
Iconfont的字體圖標(biāo)可以自己打開(kāi)修改薇宠、微調(diào)，以使得他們?cè)谧约旱膚eb中顯示的相對(duì)統(tǒng)一觅够。
經(jīng)驗(yàn)：像素拉高去放縮和位移陶因，像素調(diào)低去觀察位置骡苞。
11. 重溫CSS Sprite
給需要加入sprite的標(biāo)簽都打上統(tǒng)一的class，然后在這個(gè)class的css中統(tǒng)一引入background-image``background-repeat: no-repeat;并且記得display: inline-block（便于行并列以及設(shè)置寬高）楷扬，然后分別設(shè)置background-position即可解幽，同時(shí)別忘了用vertical-align去調(diào)整對(duì)齊。
12. 手機(jī)端顯示問(wèn)題（important）
如果通欄布局烘苹，手機(jī)端顯示不全躲株，出現(xiàn)“滾動(dòng)背景色”，可以給body設(shè)置min-width解決镣衡。
13. VIM如何刪除全部?jī)?nèi)容
按Esc鍵切換到命令行模式
:1,$d
14. 取消外邊距合并
生成塊級(jí)格式化上下文霜定。
我比較常用padding-top: 1px或者overflow: hidden，詳細(xì)方法見(jiàn)之前文章廊鸥。
