學習是一個永恒的話題，也是每個人一生都應該踐行的主題，它沒有時間、年齡的限制，只要你想開始，那隨時都是最好的時機。

時至今日，前端的html、css口訣到今天已經(jīng)到了尾聲，不知道這幾周的陪伴，給同學們帶來了哪些幫助和收獲，在共同學習的路上，希望小渡能和大家一起并肩，并給大家以助力，也希望各位同學能夠堅持學習，終身學習，因為不自我設限的人生，才有更多可能。

好了，開始今天的干貨學習吧！

24文字溢出處理

單行溢出三件套，靜止換行溢出到。多行處理僅截斷，容器文字高計算。

單行溢出三件套，靜止換行溢出到。

單行文本溢出處理方法一般是打點展示
div {
? ?white-space: nowrap;
? ?/*表示多余不換行*/
? ?overflow: hidden;
? ?/*溢出部分隱藏*/
? ?text-overflow: ellipsis;
? ?/*打點展示*/

多行處理僅截斷，容器文字高計算。

多行在 pc端僅做截斷處理 需要計算好容器高度和行高之間的關系避免截斷半截的情況

25背景圖片

背景圖片引路徑，是否鋪疊橫豎進。圖片大小設寬高，定位左右居中到。

背景圖片引路徑，是否鋪疊橫豎進。

圖片大小設寬高，定位左右居中到。

div {
? ?background-image: url("圖片路徑");
? ?background-repeat: no-repeat;
? ?/*是否平鋪*/
? ?background-size: 100% 100%;
? ?/*背景圖片大小*/
? ?background-position: center center;
? ?/*背景圖片位置*/
}

26圖片代替文字

文字縮進容器外，禁止換行溢出在。

忽略內容有寬高，只設邊距圖片到。

如若加載網(wǎng)不妙，文字代替圖片效。

27文本和文本類元素對齊方式

內聯(lián)標簽和文字，以底為準對一次。

行塊元素文字外，內容文本對齊怪。

設置文本對齊線，垂直屬性上下變。

內聯(lián)標簽和文字，以底為準對一次。

內聯(lián)標簽和文字在一起會以地為標準對齊

行塊元素文字外，內容文本對齊怪。

當inline-block 元素內部沒有文字 ?外部也有文字那么 外部文字會和元素底對齊
當inline-block 元素內部有文字 ?外部也有文字那么 外部文字會和內部文字底對齊

設置文本對齊線，垂直屬性上下變。

設置對齊線
?vertical-align: 30px;調整的是外部文本和自己的對齊位置 自己保持不動

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的css 图片换行_前端学习口诀VI：html+css口诀结尾篇，值得收藏！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。