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

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

好了，開始今天的干貨學(xué)習(xí)吧！

24文字溢出處理

單行溢出三件套，靜止換行溢出到。多行處理僅截?cái)?#xff0c;容器文字高計(jì)算。

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

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

多行處理僅截?cái)?#xff0c;容器文字高計(jì)算。

多行在 pc端僅做截?cái)嗵幚?需要計(jì)算好容器高度和行高之間的關(guān)系避免截?cái)喟虢氐那闆r

25背景圖片

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

背景圖片引路徑，是否鋪疊橫豎進(jìn)。

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

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

26圖片代替文字

文字縮進(jìn)容器外，禁止換行溢出在。

忽略內(nèi)容有寬高，只設(shè)邊距圖片到。

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

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

內(nèi)聯(lián)標(biāo)簽和文字，以底為準(zhǔn)對一次。

行塊元素文字外，內(nèi)容文本對齊怪。

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

內(nèi)聯(lián)標(biāo)簽和文字，以底為準(zhǔn)對一次。

內(nèi)聯(lián)標(biāo)簽和文字在一起會以地為標(biāo)準(zhǔn)對齊

行塊元素文字外，內(nèi)容文本對齊怪。

當(dāng)inline-block 元素內(nèi)部沒有文字 ?外部也有文字那么 外部文字會和元素底對齊
當(dāng)inline-block 元素內(nèi)部有文字 ?外部也有文字那么 外部文字會和內(nèi)部文字底對齊

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

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

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

總結(jié)

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

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