前端学习口诀VI：html+css口诀结尾篇，值得收藏！

Posted 2021-04-04 Duing

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

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