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