【武汉第93期】常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？

1.背景介绍

在了解CSS布局之前，我们需要提前知道一些知识:在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。它们各有其自身的显示特性。元素的这种属性对布局的影响很大，因而，深刻的认识它们对我们来说是很重要的。今天我们就来认识经常用到的这三类元素。

2.知识剖析

知识点1：inline、block、inline-block元素是什么？
            常见的有哪些？

知识点2：inline、block、inline-block的特性

inline-内联元素

内联元素又名行内元素，和其他元素都在一行上；

常见元素：a,span,br,i,em,strong,label,q,var,cite,code

inline元素特点:

1、和其他元素都在一行上；直到一行排不下，换下一行。

2、元素的高度、宽度及顶部和底部边距不可设置；但水平方向可以设置，如margin-left,margin-right,padding-left,padding-right

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

4、只能容纳文本或者其他内联元素

block-块级元素

在html中div、 p、h1、form、ul 和 li就是块级元素。设置display:block可以将元素显示为块级元素。

常见元素：p,div,p,h1...h6,ol,ul,dl,table,address,blockquote,form

block元素特点:

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联块状元素（inline-block）

就是同时具备内联元素、块状元素的特点，代码display:inline-block可以将元素设置为内联块状元素。

常见元素：img，input

inline-block元素特点:

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3.常见问题

inline、inline-block元素之间的间距问题

4.解决方案

1、去除元素闭合标签与下一个标签之间的空格，比如</a><a>之间不要有空隙。

2、设置父容器的font-size为0，子容器重新设置font-size。（推荐）

5.编码实战

见demo

6.扩展思考

inline-block元素的水平居中与垂直居中如何设置

水平居中：设置父级div，text-align：center；

垂直居中：方法1、分别给子元素设置vertical-align:middle;父元素设置height和line-height同高。

方法2、display:flex;justify-content:center;align-item:center;

7.参考文献

参考一：http://www.imooc.com/code/2047   慕课网-元素的分类
参考二：http://www.cnblogs.com/KeithWang/p/3139517.html        block,inline和inline-block概念和区别
             http://www.51xuediannao.com/html+css/htmlcssjq/ccc-block-inline.html       深入理解CSS块级(block)元素和内联(inline)元
             http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/  去除inline-block元素间间距的N种方法
             http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html    使用vertical-align:middle实现垂直居中

8.更多讨论

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

float布局：每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是属于恶魔系的float属性破坏了inline box。

display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素。黑白通吃，左右逢源。inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。