大家好，我是IT修真院上海第3期学院刘民举，一枚正直、纯洁、善良的前端程序员。
今天给大家分享一下，修真院官网任务css-1，深度思考的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
1.背景介绍
在了解CSS布局之前，我们需要提前知道一些知识:在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。它们各有其自身的显示特性。元素的这种属性对布局的影响很大，因而，深刻的认识它们对我们来说是很重要的。今天我们就认识经常用到的三类元素：inline、inline-block、block.
2.知识剖析
知识点1：常见的inline、inline-block、block元素
inline：a,span,br,i,em,strong,label,q,var,cite,code
inline-block：img,input
block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
知识点2：inline、inline-block、block的特性
inline特点:
（1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
(2)inline元素设置width,height属性无效。
(3)inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
3.常见问题
问题一：inline和inline-block元素之间的间距问题
问题二：inline-block元素的如何垂直居中
问题三：利用浏览器来查看元素的类型
4.解决方案
问题1：inline和inline-block元素之间的间距问题
就目前而言，个人认为，较好的方法还是设置父容器的font-size为0，子容器重新设置font-size较好。不过，具体的解决方案，还是根据实际情况进行选择，这种方案可以优先考虑。
问题2：inline-block元素的如何垂直居中
方法1：设置上下padding值相等；
方法2：设置vertical-align:middle;
方法3：设置line-height大于font-size即可实现单行文本垂直居中，无需设置line-height和height值相等
问题3：利用浏览器来查看元素的类型
打开谷歌浏览器，F12，选中“Element”项，然后选中一个元素，在“Computed”的display中即可看到元素的类型，查看到底是inline元素还是block
元素，亦或是其它类型的元素。
5.编码实战
6.扩展思考
问题一：什么是行高？
问题二：行高line-height和高度height有什么区别和联系？
7.参考文献
参考一：block，inline和inline-block概念和区别
参考三：深入理解CSS块级(block)元素和内联(inline)元素
参考四：详解CSS
8.更多讨论
inline-block布局较float布局而言，有哪些优势呢？
鸣谢
感谢大家观看
详情请看：
视频：https://v.qq.com/x/page/u05005q2mx9.html
ppt：https://github.com/ptteng/PPT/blob/master/PPT/CSS-01-inline%20block%20and%20inline-block2%20.html
网友评论