block元素、inline-block元素有哪些？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【 、block元素、inline-block元素有哪些？】

大家好，我是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元素之间的间距问题

解决方案：去除inline-block元素间间距的N种方法

就目前而言，个人认为，较好的方法还是设置父容器的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 元素分类

参考三：深入理解CSS块级(block)元素和内联(inline)元素

参考四：详解CSS

8.更多讨论

inline-block布局较float布局而言，有哪些优势呢？

鸣谢

感谢大家观看

详情请看：

视频：https://v.qq.com/x/page/u0500...

ppt：https://github.com/ptteng/PPT...