css 图片换行_前端学习口诀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;调整的是外部文本和自己的对齐位置 自己保持不动

css 图片换行_前端学习口诀VI：html+css口诀结尾篇，值得收藏！相关推荐

css 图片换行_好程序员web前端学习路线分享CSS浮动-文档流篇
1.纯文本的排列. 文档流就像我们的文本内容一样,所有的文字都会紧挨着,一个个排列下来,如果到了边界,就会换一行排列.当然如果敲回车或者按下空格键一般都会认为是一个词间距,因为英文中每个单词之间是有距 ...
css 图片换行_这个开源库教你写高级的CSS
这个仓库名为You-need-to-know-css的开源项目简直是一个在线版的<css秘密花园>,以文档.代码和在线运行效果的形式向大家展示各种高级css效果编写技巧,极大的便利了各位前 ...
css 竖行进度图_前端学习--汇集了大量 CSS 的使用和学习的示例代码
CSS-Inspiration 这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法. 目前已有上百种的CSS 实现示例, ...
零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
HTML 前端学习（4）—— CSS 属性相关
HTML 前端学习(4)-- CSS 属性相关设置长宽块级标签设置长宽行内标签设置长宽代码演示演示结果字体属性字体样式字体大小字体颜色字体粗细代码演示演示结果文字属性对齐方 ...
HTML 前端学习（3）—— CSS 选择器
HTML 前端学习(3)-- CSS 选择器 CSS 注释 CSS 语法结构 CSS 三种引入方式行内式 link 引入 style CSS 基础选择器 id 选择器类选择器元素(标签)选择器 ...
前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
css手型指针_前端基础面试题(HTML+CSS部分)
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
css 图片居中_你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...

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

多行处理仅截断，容器文字高计算。

背景图片引路径，是否铺叠横竖进。

图片大小设宽高，定位左右居中到。

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

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

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

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

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

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

css 图片换行_前端学习口诀VI：html+css口诀结尾篇，值得收藏！相关推荐

最新文章

热门文章