Web前端設(shè)計秘籍——30個工作中常用的CSS樣式

時間：2023-09-29 21:48:01 | 來源：網(wǎng)站運營

時間：2023-09-29 21:48:01 來源：網(wǎng)站運營

Web前端設(shè)計秘籍——30個工作中常用的CSS樣式：CSS樣式被稱為“層疊樣式表”，是一種網(wǎng)頁制作不可或缺的技術(shù)，是用于修飾網(wǎng)頁樣式，達到設(shè)計效果的一種樣式語言。

而由于樣式效果非常多，在工作中并非所有的樣式都會用到，因此經(jīng)?？赡苡龅侥承┨囟邮綍蝗幌氩黄饋淼那闆r，更何況對于初學(xué)者來說遇到這種情況。

接下來就跟著小凡一起整理一下這些常用而易忘的css樣式。




css樣式的效果

01、文字超出部分顯示省略號

單行文本的超出部分顯示省略號。（一定要給元素本身設(shè)置寬度）

.title { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}


CSS樣式效果圖

多行文本的超出部分顯示省略號

.title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}


CSS樣式效果圖

PS：建議加上word-break:break-all 否則遇到長單詞會出現(xiàn)很神奇的布局情況。




圖一




圖二

圖一未添加，圖二添加后的不同效果




02、中英文(長單詞)自動換行

word-break:break-all; 只對英文起作用，以字母作為換行依據(jù)







word-wrap:break-word; 只對英文起作用，以單詞作為換行依據(jù)







white-space:pre-wrap; 只對中文起作用，強制換行

white-space:nowrap;都起作用，強制不換行







PS:網(wǎng)頁中英文單詞通過“_”(下劃線)和 “-”（中劃線）連接的英文單詞在編譯處理是方式是截然不同的。

下劃線是程序命名方法下劃線命名法的規(guī)范,其他命名規(guī)范還有駝峰式命名。屬于程序?qū)Ｓ玫拿?guī)范。可以連接想連的部分為一個變量名，不是單詞。




下劃線連接單詞效果

中劃線是英語復(fù)合詞有連接2個單詞的意思，但前后是2個獨立單詞。




中劃線連接單詞效果

03、設(shè)置表單輸入框placeholder的樣式

input::-webkit-input-placeholder { color:skyblue; text-align: center;}input::-ms-input-placeholder { color:skyblue; text-align: center;}input::-moz-placeholder { color:skyblue; text-align: center;}


CSS樣式效果圖

04、不固定高度的元素文字垂直居中

兼容IE8：偽元素和inline-block/vertical-align

.box::before { content:""; display: inline-block; height: 100vh; vertical-align: middle; text-align: center;}


CSS樣式效果圖

不兼容IE8以下: flex布局

.box { background: skyblue; height: 100vh; display: flex; justify-content: center; align-items: center;}


CSS樣式效果圖

05、文字兩端對齊

.wrap { margin: 0 auto; width: 800px; text-align: justify; text-justify: distribute-all-lines; /* 兼容IE6-8 */ text-align-last: justify; -moz-text-align-last: justify;}


CSS樣式效果圖

06、iOS頁面中滑動卡頓

body,html { -webkit-overflow-scrolling:touch}07、設(shè)置滾動條樣式

.wrap { margin: 0 auto; width: 300px; height: 200px; overflow: auto;}.wrap::-webkit-scrollbar { /* 整體大小樣式 */ width: 10px; height: 10px; }.wrap::-webkit-scrollbar-thumb { /* 滾動條里的滑塊 */ border-radius: 10px; background-color: skyblue; background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 55%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);}.test::-webkit-scrollbar-track {/* 滾動條的軌道 */ box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #ededed; border-radius: 10px;}


CSS樣式效果圖

08、隱藏滾動條但又可以滾動

.wrap { margin: 0 auto; width: 300px; height: 200px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}.wrap::-webkit-scrollbar {/* 整體大小樣式 */ display: none;}


CSS樣式效果圖

09、css繪制三角

無邊框三角

div { width:0; height:0; border-width: 0 40px 40px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.3);}CSS樣式效果圖




帶邊框三角

div { position: relative; width:0; height:0; border-width: 40px 0 40px 40px ; border-style: solid; border-color: transparent black ;}div::after { content: ""; position: absolute; top:-36px; left:-38px; border-width: 36px 0 36px 36px ; border-style: solid; border-color: transparent red ;}


CSS樣式效果圖

10、文字間的間距

text-indent 文章段落首行縮進

letter-spacing 字與字之間的間距

.wrap { margin: 0 auto; width: 600px; text-indent: 2em; letter-spacing: 10px;}


CSS樣式效果圖

11、禁止用戶選中元素

有些時候不想讓用戶選中內(nèi)容，復(fù)制網(wǎng)站上文字內(nèi)容。

.wrap { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}12、元素占滿整個屏幕

以往需要在做全屏遮罩功能的時候會設(shè)置height:100%。但是這種做法需要該遮罩層的所有父級元素都逐級設(shè)置高度才能使遮罩繼承高度屬性。所以可以使用100vh單位來實現(xiàn)。

.mask { width:100%; height: 100vh; background: rgba(0,0,0,0.6); position: fixed; top: 0;}


CSS樣式效果圖

以上就是為學(xué)員們整理的針對工作中對商品/新聞等標(biāo)題的樣式處理，彈窗做法的一些經(jīng)常遇到的css樣式實現(xiàn)方法。

如果覺得有用可以收藏關(guān)注，同時還可以留言說出你想知道或者是遇到的不會的樣式處理，我們還將繼續(xù)推出后續(xù)內(nèi)容，繼續(xù)為大家解讀別的常用css實用技巧以及其他的前端開發(fā)新技能，讓我們期待下一期吧。

文末領(lǐng)資料

Web前端設(shè)計秘籍——30個工作中常用的CSS樣式