vlambda博客
学习文章列表

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

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


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