今天整理筆記主要如下幾點(diǎn)：
- input標(biāo)簽中通過css調(diào)整placeholder顯示樣式渤昌；
- visibility、display独柑、opacity在隱藏上的區(qū)別；
- a標(biāo)簽偽類選擇器车酣；
- transition過渡模塊索绪；
- 2D轉(zhuǎn)化模塊湖员；
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
一瑞驱、input中placeholder調(diào)整首行縮進(jìn)的代碼樣式：
input::-webkit-input-placeholder{ /*WebKit browsers*/
text-indent:34px;
/*line-height: 38px;*/
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
text-indent:34px;
/*line-height: 38px;*/
}
input::-ms-input-placeholder{ /*Internet Explorer*/
text-indent:34px;
/*line-height: 38px;*/
}
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
二、 visibility凳寺、display、opacity在隱藏上的區(qū)別
我們常常會(huì)看到如上的層級(jí)結(jié)構(gòu)读第，1和3是兄弟關(guān)系拥刻，2是1子代，4是3子代般哼，我們?cè)趆over1的時(shí)候2會(huì)出現(xiàn)，hover3的時(shí)候4會(huì)出現(xiàn)漾橙。這個(gè)時(shí)候存在如下區(qū)別：
- 如果只是簡(jiǎn)單的隱藏楞卡，出現(xiàn)，visibility和display沒什么區(qū)別蒋腮，如果給2加了特效，display方式會(huì)將特效消除池摧，visilibity正常。
- 感覺使用opactiy不太適合這種場(chǎng)合使用膘魄，它能夠保留特效，但是即使在2隱藏的情況下创葡，在默認(rèn)情況下代咸，鼠標(biāo)放在2上面蹈丸，2也會(huì)自動(dòng)將opactiy變成1呐芥，解決辦法就是將3的調(diào)整成浮動(dòng)流（一般是relative），然后設(shè)置Z-index>0即可荸百。這個(gè)時(shí)候就可以在點(diǎn)擊3的時(shí)候滨攻，在3和2的共同區(qū)域十嘿，然4顯示出來锣吼，而不會(huì)讓2顯示出來畜份。但是有一點(diǎn)需要注意：如下圖欣尼，按照上面的設(shè)置，如果將鼠標(biāo)停留在2的右側(cè)愕鼓，這個(gè)時(shí)候2也會(huì)跳出來，本來我們的本意是hover1的時(shí)候2才會(huì)顯示册倒，但是鼠標(biāo)放在2的右側(cè)2同樣會(huì)顯示出來，這是不好的一點(diǎn)驻子。還有一個(gè)不好的一點(diǎn)估灿，剛才2顯示出來的效果會(huì)在3的背面，這個(gè)時(shí)候我們就想通過設(shè)置Z-index來講2在顯示的狀態(tài)下甲捏，提高到最上層來顯示，這個(gè)時(shí)候如果1和3是兄弟關(guān)系司顿，2和4是子代關(guān)系，那么即使1和3都設(shè)置成浮動(dòng)流化漆，然后Z-index值一樣，假設(shè)是4座云，然后設(shè)置2在1hover的情況下付材，Z-index=5，即使這樣厌衔，2也不可能蓋住3，這個(gè)時(shí)候需要將3調(diào)整成1的后代富寿，就能將和2進(jìn)行比較Z-index锣夹。
（以上經(jīng)驗(yàn)不完善）
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
三苏潜、a標(biāo)簽偽類選擇器
格式：
- :link 修改從未被訪問過狀態(tài)下的樣式
- :visited 修改被訪問過的狀態(tài)下的樣式
- :hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
- :active 修改鼠標(biāo)長(zhǎng)按狀態(tài)下的樣式
注意：
書寫順序：愛恨原則，順序錯(cuò)了會(huì)無效：愛恨原則 love hate
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
四砖顷、transition過渡模塊
常見屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property不簡(jiǎn)寫格式：
transition-property: background-color;
transition-duration: 5s;
transition-property簡(jiǎn)寫格式：
transition：background-color 5s;
當(dāng)有兩個(gè)以上要過渡的時(shí)候：用逗號(hào)隔開赃梧；
transition-property: width, background-color;
transition-duration: 5s, 5s;
transition-timing-function的五種運(yùn)動(dòng)形式：
linear
ease
ease-in
ease-out
ease-in-out
以上特性都可以通過連寫來完成簡(jiǎn)寫：
1.過渡連寫格式
transition: 過渡屬性 過渡時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間;
2.過渡連寫注意點(diǎn)
- 和分開寫一樣, 如果想給多個(gè)屬性添加過渡效果也是用逗號(hào)隔開即可
- 連寫的時(shí)可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰帉懥饲懊娴膬蓚€(gè)參數(shù)就已經(jīng)滿足了過渡的三要素
- 如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)時(shí)間都一樣, 那么可以簡(jiǎn)寫為
transition:all 0s;
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
五豌熄、2D轉(zhuǎn)化模塊
- 格式（例子）：
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5)
rotate分為rotateX、rotateY锣险、rotateZ，相對(duì)于 - 變形中心點(diǎn)：
transform-origin: 0% 0%巷折；
transform-origin: 200px 0px；
transform-origin: left top
