课堂课题：
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
关联任务：
任务一
直播时间：
2019-05-06 15:30:00
课堂内容：
视频链接：
PPT链接：
提交按钮：
小课堂内容格式
标题：
【修真院xx（职业）小课堂】课题名称
开场语：
大家好，我是IT修真院XX分院第X期的学员XX，一枚正直纯洁善良的XX程序员，今天给大家分享一下，修真院官网XX（职业）任务X，深度思考中的知识点——XXX
（1）背景介绍：
背景介绍的时候，尽可能的要宽广，讲清楚来龙去脉，讲清楚为什么会需要这个技术。
（2）知识剖析：
讲知识点的时候，尽可能的成体系，学会成体系的去给别人介绍知识。现在很多做的都是零散的，没有分类。
（3）常见问题：
最少列出1个常见问题。
（4）解决方案：
写清楚常见问题的解决方案。
（5）编码实战：
尽可能的去寻找在真实项目中在用的。如果你能找到某个网站在用你说的知识点，这是最好的。学以致用，否则当成练习题就没有意义了。多准备一些demo，讲解过程中将知识点和demo结合，便于大家理解所讲解的知识点。
（6）拓展思考：
知识点之外的拓展思考，由分享人进行讲解，这些东西就是所谓的深度，也是一个人技术水准高低比较的表现。
（7）参考文献：
引入参加文献的时候，在引用的句子后面加上序号【1】。参考文献中列出详细来源。不要去抄别人的东西，这是一个基本的态度。
（8）更多讨论：
Q1：提问人：问题？
A1：回答人（可以是分享人，也可以是其他学员）：回答
Q2：提问人：问题？
A2：回答人（可以是分享人，也可以是其他学员）：回答
Q3：提问人：问题？
A3：回答人（可以是分享人，也可以是其他学员）：回答
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
标题：
【修真院武汉-18-web-陈思捷 小课堂】常见的inline元素、block元素、inline-block元素有哪些？它们有什么区别？
开场语：
大家好，我是IT修真院武汉分院第18期的学员陈思捷，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务1，深度思考中的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们有什么区别？
（1）背景介绍：
历史
这三个元素到底是怎么产生的。line和block可能是类似于1+1=2的基础概念，还记得在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，整理分类并集纳成册。我们可以把剪下来的纸块看成是block元素，而用笔记录的文字、图画，看成是line元素。
inline-block，根据搜寻的资料发现，在IE5.5版就开始支持inline-block值，也就是1999年12月（最终版为2007年7月）。css2更新发布在1998年5月，2.1的更新草案则是在2002年8月2日发布的（css2.1版添加了display的inline-block值）。当年可能是为更好的进行元素布局，才在标准里给display添加inline-block值，使得我们有一个很方便的元素特性可供使用。
目的
每个html标签元素都有其默认的元素类型，主要包括两大类:inline内联元素、block块元素。除默认为以上两种，还有部分标签元素叫可变元素，会根据上下文语境决定该元素为inline元素或是block元素。在css里，有一个display的属性，他规定元素应该生成的框的类型。可能的值有很多，我们比较常用的有inline-block。其中inline-block是在css2.1里新增的值。具有这个值的元素，我们可以把它叫做inline-block行内块元素。以上元素的类型是我们学习web里需要理解的核心概念之一。对页面进行布局排版，究其根本是在普通文档流的基础上，进行各种设置，达到我们想要的效果。这三个元素特性，完全影响我们的布局排版。下面就开始认识一下它们。
（2）知识剖析：
知识点1：常见的inline、inline-block、block元素
常见元素：
inline：a,span,br,i,em,strong,label,q,var,cite,code
block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
inline-block：img,input
知识点2：inline行内元素特点
（1）和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
（2）元素的高度、宽度及顶部和底部边距不可设置
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。
知识点3：block块元素特点
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
知识点4： inline-block行内块元素特点
（1）内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
（2）代码display:inline-block就是将元素设置为行内块状元素。
（3）和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
（3）常见问题：
1.inline和inline-block元素之间的间距问题
2.inline-block元素的如何垂直居中
3. inline-block元素插入图片导致元素位置变化
（4）解决方案：
1.inline和inline-block元素之间的间距问题
三种常用方法
1，font-size:0
2，使用margin负值
3，弹性盒子--给父元素设置弹性盒子
2.inline-block元素的如何垂直居中
1，设置上下padding值相等
2，设置line-height
3，弹性盒子--父级是弹性盒子他自身也可以设置弹性盒子
3. inline-block元素插入图片导致元素位置变化
1，默认是基线对准，设置成顶线对准
2，弹性盒子--父级是弹性盒子他自身也可以设置弹性盒子
（5）编码实战：
demo1、demo2
（6）拓展思考：
个人观点：使用inline-block布局局限性很大，多实用弹性盒子flex，好用且功能强大。
（7）参考文献：
参考2：CSS深入理解vertical-align和line-height的基友关系
参考3：img元素底部为何有空白？
（8）更多讨论：
暂无
（9）鸣谢：
感谢简书、csdn两位不知名师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
请您登录 后进行评论
[真传弟子]JS-关楠 发表于 2019-05-24 11:32:07 #1
demo写得还是比较不错的，能比较直观地去别处各个常用元素之间的区别
回复