今天整理筆記主要如下幾點：
- 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ū)別
1.PNG
我們常常會看到如上的層級結(jié)構(gòu)，1和3是兄弟關(guān)系，2是1子代，4是3子代，我們在hover1的時候2會出現(xiàn)，hover3的時候4會出現(xiàn)。這個時候存在如下區(qū)別：
- 如果只是簡單的隱藏，出現(xiàn)，visibility和display沒什么區(qū)別，如果給2加了特效，display方式會將特效消除，visilibity正常。
- 感覺使用opactiy不太適合這種場合使用，它能夠保留特效，但是即使在2隱藏的情況下，在默認(rèn)情況下，鼠標(biāo)放在2上面，2也會自動將opactiy變成1，解決辦法就是將3的調(diào)整成浮動流（一般是relative），然后設(shè)置Z-index>0即可。這個時候就可以在點擊3的時候，在3和2的共同區(qū)域，然4顯示出來，而不會讓2顯示出來。但是有一點需要注意：如下圖，按照上面的設(shè)置，如果將鼠標(biāo)停留在2的右側(cè)，這個時候2也會跳出來，本來我們的本意是hover1的時候2才會顯示，但是鼠標(biāo)放在2的右側(cè)2同樣會顯示出來，這是不好的一點。還有一個不好的一點，剛才2顯示出來的效果會在3的背面，這個時候我們就想通過設(shè)置Z-index來講2在顯示的狀態(tài)下，提高到最上層來顯示，這個時候如果1和3是兄弟關(guān)系，2和4是子代關(guān)系，那么即使1和3都設(shè)置成浮動流，然后Z-index值一樣，假設(shè)是4，然后設(shè)置2在1hover的情況下，Z-index=5，即使這樣，2也不可能蓋住3，這個時候需要將3調(diào)整成1的后代，就能將和2進(jìn)行比較Z-index。
（以上經(jīng)驗不完善）
2.PNG
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
三、a標(biāo)簽偽類選擇器
格式：
- :link 修改從未被訪問過狀態(tài)下的樣式
- :visited 修改被訪問過的狀態(tài)下的樣式
- :hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
- :active 修改鼠標(biāo)長按狀態(tài)下的樣式
注意：
書寫順序：愛恨原則，順序錯了會無效：愛恨原則 love hate
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
四、transition過渡模塊
常見屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property不簡寫格式：
transition-property: background-color;
transition-duration: 5s;
transition-property簡寫格式：
transition：background-color 5s;
當(dāng)有兩個以上要過渡的時候：用逗號隔開；
transition-property: width, background-color;
transition-duration: 5s, 5s;
transition-timing-function的五種運動形式：
linear
ease
ease-in
ease-out
ease-in-out
以上特性都可以通過連寫來完成簡寫：
1.過渡連寫格式
transition: 過渡屬性 過渡時長 運動速度 延遲時間;
2.過渡連寫注意點
- 和分開寫一樣, 如果想給多個屬性添加過渡效果也是用逗號隔開即可
- 連寫的時可以省略后面的兩個參數(shù), 因為只要編寫了前面的兩個參數(shù)就已經(jīng)滿足了過渡的三要素
- 如果多個屬性運動的速度/延遲的時間/持續(xù)時間都一樣, 那么可以簡寫為
transition:all 0s;
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
五、2D轉(zhuǎn)化模塊
- 格式（例子）：
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5)
rotate分為rotateX、rotateY、rotateZ，相對于 - 變形中心點：
transform-origin: 0% 0%；
transform-origin: 200px 0px；
transform-origin: left top
