工作中實用的css小技巧

2021-10-09 08:16:31 字數 1248 閱讀 8265

一、設定input 的placeholder的字型樣式

input::-webkit-input-placeholder

input::-moz-placeholder

input:-ms-input-placeholder

input:-moz-placeholder

設定input聚焦時的樣式

input:focus

取消input的邊框

border: none;

outline: none;

二、隱藏滾動條或更改滾動條樣式

css主要部分的樣式*//*定義滾動條寬高及背景,寬高分別對應橫豎滾動條的尺寸

::-webkit-scrollbar

定義滾動條的軌道顏色、內陰影及圓角

::-webkit-scrollbar-track

定義滑塊顏色、內陰影及圓角

::-webkit-scrollbar-thumb

/定義兩端按鈕的樣式/

::-webkit-scrollbar-button

定義右下角匯合處的樣式

::-webkit-scrollbar-corner

三、文字超出隱藏並顯示省略號

單行(一定要有寬度)

width:200rpx;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;多行

word-break: break-all;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

四、控制div內的元素自動換行

word-wrap: break-word;

word-break:break-all;

五、 純css畫三角形

#demo

六、 絕對定位元素居中(水平和垂直方向)

#demo

CSS實用小技巧

1 不要使用過小的做背景平鋪。這就是為何很多人都不用 1px 的原因,這才知曉。寬高 1px 的平鋪出乙個寬高 200px 的區域,需要 200 200 40,000 次,占用資源。2 無邊框。推薦的寫法是 border none 哈哈,我一直在用這個。border 0 只是定義邊框寬度為零,但邊框...

SQL中實用的小技巧

以下均針對oracle資料庫,與mysql sqlserver或有出入,歡迎共同交流 1 查詢符合條件的記錄數,查不到時顯示為0而不是返回null select case count id when 0 then 0 else count id from 表名 where xx xx2 查詢符合某件...

工作中開發小思路

1 根據ascall碼獲取大小寫字母 97 122 十進位制 a zfor int i 97 i 123 i output a z system.out.println char i 65 90 十進位制 a zfor int i65 i 100 i output a z system.out.pr...