html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高級(jí)技巧目錄
1、精靈圖
使用原因：一個(gè)網(wǎng)頁(yè)往往會(huì)有很多小的背景圖片作為裝飾，為了有效減少接收和發(fā)送請(qǐng)求的次數(shù)，提供頁(yè)面加載速度，所以出現(xiàn)了精靈技術(shù)。核心原理就是將小圖片整合到一張圖里，這樣瀏覽器只需要發(fā)送一次請(qǐng)求到服務(wù)器就可以了。
屬性：background-position
使用原理：先量好背景圖片的寬和高，然后創(chuàng)建一個(gè)盒子，大小和背景圖片一樣，插入整張精靈圖到盒子中，圖片默認(rèn)都是在盒子的左上角，再看需要的背景圖片在X和Y軸的哪個(gè)位置，調(diào)整好位置即可顯示出來(lái)。
精靈圖屬性
2、字體圖標(biāo)
優(yōu)點(diǎn)~
字體圖標(biāo)的優(yōu)點(diǎn)
字體圖標(biāo)使用方法
以icomoon圖庫(kù)為例，挑選需要的圖標(biāo)下載，解壓，引入html文件使用。
注意點(diǎn)：1、fonts文件夾需要和html文件放在一起
2、把解壓出來(lái)的style.css里的樣式復(fù)制到html文件style里
3、復(fù)制解壓出來(lái)的html里面圖標(biāo)對(duì)應(yīng)的方框，到需要添加字體圖標(biāo)的地方
4、字體圖標(biāo)的字體需要和樣式里的字體一致
字體圖標(biāo)使用步驟
字體圖標(biāo)使用步驟
字體圖標(biāo)使用步驟
字體圖標(biāo)更新追加方法
字體圖標(biāo)更新追加
阿里巴巴矢量圖標(biāo)庫(kù)
1.搜索--加入購(gòu)物車--添加至項(xiàng)目---下載到本地--解壓，挑選字體文件格式(四種：eot/svg/ttf/woff，建議放入單獨(dú)的字體文件夾 )與樣式文件
iconfont.css(head中引入)---若將字體文件與樣式文件單獨(dú)放，在css文件中修改字體src地址，改成對(duì)應(yīng)的；
2.寫入公共樣式.iconfont,使用i標(biāo)簽插入; 通過(guò)class名引入到body中，class名稱為iconfont.css中對(duì)應(yīng)圖標(biāo)的class名;
舉例
CSS三角做法
4、CSS用戶界面樣式
(1)更改用戶的鼠標(biāo)樣式；(2)表單輪廓；(3)防止文本域拖拽
(1)更改用戶的鼠標(biāo)樣式cursor
鼠標(biāo)樣式cursor
(2)去除表單的默認(rèn)藍(lán)色輪廓outline
input ： ｛outline：none或者0｝
表單藍(lán)色輪廓線
(3)防止拖拽文本域resize
textarea ： ｛resize：none或者0｝
文本域拖拽
5、vertical-align屬性應(yīng)用(設(shè)置元素垂直對(duì)齊，行內(nèi)塊)
設(shè)置元素垂直對(duì)齊
6、溢出文字省略號(hào)做法
單行文本省略號(hào)
單行文本省略號(hào)
多行文本省略號(hào)(了解，兼容性差，更推薦讓后臺(tái)做)
overflow:?hidden;
text-overflow:?ellipsis;
display:?-webkit-box;
-webkit-line-clamp:?2;
-webkit-box-orient:?vertical;
white-space:?normal?!important;
word-wrap:?break-word;
7、常見布局技巧
(1)margin負(fù)值運(yùn)用，避免邊框重疊變粗，如邊框?yàn)?px，則margin-1px
margin負(fù)值運(yùn)用
如果需要鼠標(biāo)經(jīng)過(guò)時(shí)改變邊框顏色，先偽類顏色，然后加上一句提升層級(jí)，相對(duì)定位(其他定位不保留位置，會(huì)影響后面盒子)或者z-index，因?yàn)榍懊嬖O(shè)置了margin負(fù)值，壓住了盒子一個(gè)邊框，所以需要加一句提升層級(jí)，使得鼠標(biāo)經(jīng)過(guò)某個(gè)盒子時(shí)，提高它的優(yōu)先級(jí)完整顯示出來(lái)。
(2)文字圍繞浮動(dòng)
利用浮動(dòng)只會(huì)壓住標(biāo)準(zhǔn)流盒子，不會(huì)壓住里面的內(nèi)容，可以布局文字圍繞效果。先設(shè)置一個(gè)大盒子，里面左右一個(gè)盒子放圖片和文字，給圖片的盒子設(shè)置大小并浮動(dòng)，文字自然環(huán)繞。
(3)行內(nèi)塊運(yùn)用
行內(nèi)元素，行內(nèi)塊元素可以用text-align：center水平居中
行內(nèi)塊運(yùn)用
3、三角強(qiáng)化運(yùn)用
三角強(qiáng)化運(yùn)用
overflow:?hidden;
text-overflow:?ellipsis;
display:?-webkit-box;
-webkit-line-clamp:?2;
-webkit-box-orient:?vertical;
white-space:?normal?!important;
word-wrap:?break-word;
總結(jié)
以上是生活随笔為你收集整理的html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
