自定義博客cnblogs樣式的必備前端小知識——css

css樣式相關小知識

 

文字超出一行顯示省略號

overflow: hidden;   /*自動隱藏文字*/
text-overflow: ellipsis;   /*文字隱藏后添加省略號*/
white-space: nowrap;   /*強制不換行*/

 

文字超出兩行顯示省略號

overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;    /* 限制行數 */
-webkit-box-orient: vertical;

 

樣式優先級關系

!important > 內聯樣式 > id選擇器樣式 > 類選擇器樣式 > 元素選擇器樣式

 

過渡樣式

transition: property duration timing-function delay;

transition-property:指定過渡的css屬性名;當設置多個屬性過渡時，屬性之間用逗號隔開

transition-duration：過渡時間；規定了完成過渡需要花費的時間，可以為s或ms

transition-timing-function：規定屬性過渡效果的速度曲線，取值可以為ease(默認值，慢速開始，快速變化，慢速結束) / linear(始終保持相同的速度) / ease-in(慢速開始，加速效果)/ease-out(有減速的效果) / ease-in-out(慢速開始和結束，先加速再減速)

transition-delay：過渡延遲，即多長時間以后再執行過渡效果，取值為秒或毫秒

 

禁止元素點擊事件

.no-click{ pointer-events:none;}

 

webkit內核美化滾動條

/*整體部分*/ 
::-webkit-scrollbar
{
    width: 10px;
}
/*滑動軌道*/ 
::-webkit-scrollbar-track
{
    background: none;
}
/*滑塊*/
::-webkit-scrollbar-thumb
{
    background-color: rgba(255,255,255,.75)
}
/*滑塊效果*/ 
::-webkit-scrollbar-thumb:hover
{
    background-color: rgba(85, 85, 85, 0.4);
}

 

選取第n個元素

li:first-child{
    background:#fff    /* 首個元素 */
}
li:last-child{
    background:#fff    /* 最后一個元素 */}
li:nth-child(3){
    background:#fff    /* 指定第3個元素 */
}
li:nth-last-child(3){
    background:#fff    /* 指定倒數第3個元素 */
}