常用代碼片段css

一莺奔、禁止選中文字

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

二、超出文本展示省略號

單行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

三变泄、樣式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

四令哟、隱藏瀏覽器滾動條

.warp{
  width: 500px;
  overflow: hidden;
}
.warp>div{
  width: 104%;
  height: 500px;
  overflow-y: scroll;
}

五、偽元素清除浮動

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

六妨蛹、自動填充剩余空間

flex: 1;

七屏富、包裹過長文本

white-space: pre-line;
word-wrap: break-word;

八、省略號動畫

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026";
}

@keyframes ellipsis {
    from {
        width: 2px;
    }

    to {
        width: 15px;
    }
}

九蛙卤、表格斑馬線

tbody tr:nth-child(odd) {    
  background-color: #ccc;
}

十狠半、vue深層選擇器

常規(guī)用法
/deep/
兼容差
>>>
scss中的用法
::v-deep

十一、隱藏滾動條

class{
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none; /* Firefox */
}
.class::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末表窘,一起剝皮案震驚了整個濱河市典予,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌乐严,老刑警劉巖瘤袖,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異昂验,居然都是意外死亡捂敌,警方通過查閱死者的電腦和手機(jī)艾扮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來占婉,“玉大人泡嘴,你說我怎么就攤上這事∧婕茫” “怎么了酌予?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長奖慌。 經(jīng)常有香客問我抛虫,道長,這世上最難降的妖魔是什么简僧? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任建椰,我火速辦了婚禮,結(jié)果婚禮上岛马,老公的妹妹穿的比我還像新娘棉姐。我一直安慰自己,他們只是感情好啦逆,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布伞矩。 她就那樣靜靜地躺著,像睡著了一般蹦浦。 火紅的嫁衣襯著肌膚如雪扭吁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天盲镶,我揣著相機(jī)與錄音,去河邊找鬼蝌诡。 笑死溉贿,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的浦旱。 我是一名探鬼主播宇色,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼颁湖!你這毒婦竟也來了宣蠕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤甥捺,失蹤者是張志新(化名)和其女友劉穎抢蚀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體镰禾,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡皿曲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年唱逢,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屋休。...
    茶點(diǎn)故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡坞古,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出劫樟,到底是詐尸還是另有隱情痪枫,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布叠艳,位于F島的核電站听怕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏虑绵。R本人自食惡果不足惜尿瞭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望翅睛。 院中可真熱鬧声搁,春花似錦、人聲如沸捕发。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽扎酷。三九已至檐涝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間法挨,已是汗流浹背谁榜。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留凡纳,地道東北人窃植。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像荐糜,于是被迫代替她去往敵國和親巷怜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容