常用CSS代碼大全(工作必備)
常用的常用CSS代碼大全包括但不限于以下內容:
(圖片來(lái)源網(wǎng)絡(luò ),侵刪)1、??全工文本設置:
文字超出部??分顯示省略號:使用textoverflow: ellipsis;可以實(shí)現當文本超出容器寬度時(shí)顯示省略號。作必
中英文自動(dòng)(dong)換行:通過(guò)wordwrap: breakword;或wordbreak: break??all;可以強制在長(cháng)單詞或URL地址內部進(jìn)行換行。常用
文(wen)字陰影:使用textshadow: hoffset voffset blur color;來(lái)給文字添加陰影效果。全工
字體樣式設置:包括fontsize、作必fontstyle和fontweight等屬性來(lái)調整字體大小、常用樣式(如斜體)和粗細。全工
顏色(′ω`)設置:使用color屬性來(lái)定義文字顏色,作必建議使用網(wǎng)頁(yè)安全色。常用
2、全工布局定位:
不固定高度寬度的作必div垂直居中:可以使用flexbox或者grid布局來(lái)實(shí)現子元素的垂直居中。
解決IOS頁(yè)面滑??動(dòng)卡頓:可以嘗試使用webkitoverfl(′▽?zhuān)?owscrolling: touch;來(lái)??優(yōu)化滾動(dòng)性能。常用
3、全工滾動(dòng)條樣式:
自定義滾動(dòng)條樣式:可以通過(guò)::webkitscrollbar選擇器來(lái)定制滾動(dòng)條的作必外觀(guān),包括寬度、按鈕樣式等。??
4、動(dòng)畫(huà):(′ω`)
簡(jiǎn)寫(xiě)屬性animation:可以用來(lái)集合多個(gè)動(dòng)畫(huà)屬性,例如animationname, animationduration, ani(′_`)mationtimingfunction等。
5、
超鏈接樣式:通過(guò)a選擇器來(lái)定義鏈接的顏色、下劃線(xiàn)等樣式。
6、偽類(lèi)和偽元素:
使用:hover, :focus, :active等偽類(lèi)來(lái)改變用戶(hù)交互時(shí)的樣式。
使用偽元素如::before, ::aft??er創(chuàng )建特殊效果或內容。
7、響應式設計:
媒體查詢(xún)(Media Queries):根據不同的屏幕尺寸應用不同的樣式規(′▽?zhuān)?)則,實(shí)現響應式布局。
8、盒模型相關(guān):
boxsizing:設置元素的盒模型為contentbox或borderbox。
display:控制元素是作為塊級還是行內級元素顯示,以及是否生成新的塊格式化上下文。
9、清除浮動(dòng):
使用clearfix技術(shù)或者overflow屬性來(lái)清除浮動(dòng)帶來(lái)的影響。
10、表格布局:??
使用table, tr, td等標簽和相關(guān)屬性來(lái)創(chuàng )建和樣式化表格(′▽?zhuān)?。
11、
使用input, textarea, select等選擇器以及placeholder屬性來(lái)樣式化表單元素。





