搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Duing > 前端学习口诀VI:html+css口诀结尾篇,值得收藏!

前端学习口诀VI:html+css口诀结尾篇,值得收藏!

Duing 2020-06-30

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


时至今日,前端的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;调整的是外部文本和自己的对齐位置 自己保持不动



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《前端学习口诀VI:html+css口诀结尾篇,值得收藏!》的版权归原作者「Duing」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Duing微信公众号

Duing微信公众号:duyi-duing

Duing

手机扫描上方二维码即可关注Duing微信公众号

Duing最新文章

精品公众号随机推荐