html背景图不显示_前端学习口诀VI:html+css口诀结尾篇,值得收藏!

本文分享了前端开发中处理单行和多行溢出的技巧,包括white-space属性、text-overflow和行高计算。此外,还讲解了背景图片的使用、定位以及图片替文策略。掌握了这些,将有助于提升页面布局的灵活性和美观度。
摘要由CSDN通过智能技术生成

5738863c265a589325f15637405144dc.png

学习是一个永恒的话题,也是每个人一生都应该践行的主题,它没有时间、年龄的限制,只要你想开始,那随时都是最好的时机。

时至今日,前端的html、css口诀到今天已经到了尾声,不知道这几周的陪伴,给同学们带来了哪些帮助和收获,在共同学习的路上,希望小渡能和大家一起并肩,并给大家以助力,也希望各位同学能够坚持学习,终身学习,因为不自我设限的人生,才有更多可能。

好了,开始今天的干货学习吧!

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图片代替文字

文字缩进容器外,禁止换行溢出在。

忽略内容有宽高,只设边距图片到。

如若加载网不妙,文字代替图片效。

27文本和文本类元素对齐方式

内联标签和文字,以底为准对一次。

行块元素文字外,内容文本对齐怪。

设置文本对齐线,垂直属性上下变。

内联标签和文字,以底为准对一次。

内联标签和文字在一起会以地为标准对齐

行块元素文字外,内容文本对齐怪。

当inline-block 元素内部没有文字  外部也有文字那么 外部文字会和元素底对齐
当inline-block 元素内部有文字  外部也有文字那么 外部文字会和内部文字底对齐

设置文本对齐线,垂直属性上下变。

设置对齐线
 vertical-align: 30px;调整的是外部文本和自己的对齐位置 自己保持不动

08082f7897eebd6e76be525c882f9642.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值