在浏览器网页布局过程当中，我们会反复遇到一个概念，那就是块元素。为了更好的了解块元素，我们首先要知道在浏览器的网页布局过程当中，为什么要使用块元素这个概念，以及在什么时候使用块元素。这种将元素划分成块的思想对我们的布局有什么好处?接下来我们将从以下这几个方面来阐明块元素的思想。

第一，统一特征的盒子模型

我们知道一个网页，它是有很多的标签按照一定的规则元素堆叠排放而成的。浏览器在解析标签的时候。会将每个标签解析成一个盒子模型。也就是说他把一个标签，分为了三个部分去解析并渲染。这三个部分，分别是内容区(content)，内填充区(padding)，边框区(border)，外边距区(margin)。盒子模型的结构如下图所示。

在我个人看来，不管是HTML语言的开发者，或者说是浏览器内核渲染机制的设计者，甚至是其他语言。当创造语言的人都会秉持一种观念，如何让这个语言能够在一套行之有效的机制约束下，让人以一种最容易理解的方式去操控该语言的编译及渲染结果。

盒模型可以说是让我们整个页面布局中的每个元素都处于一种极其可控的状态，你可以利用这种机制，通过灵活控制元素内部的尺寸关系以及元素之间的距离关系，实现各种类型的网页布局需求。

·在盒模型的核心观念里，每个标签元素都是一个盒模型。你可以将其想象为一个装着电脑主机的包装盒，里面的电脑主机就是盒模型的content，泡沫避震区就是padding，纸盒子本身就是border，然后，每个包装盒之间的间隙就是margin。那你就可以按照自己的实际需求随心随欲地堆叠元素。进而控制元素之间的相互关系，达到页面的整体设计。

第二、元素基于盒模型的二次分类

在这个基于盒模型的元素堆叠过程当中，其堆叠的方向又分为两种情况：一种是纵向罗列，另一种是横向并列。为了能够使我们在不同情况下以最合理便捷的方式去实现这两种情况的布局问题。浏览器在渲染标签的时候，在统一盒模型特征的基础之上，又按照整体需求对所有标签执行了进一步的分类：块元素、行内元素、行内块状元素。

这三种分类的元素，就像是拥有三种不同性格的族群一样，将他们在不加任何额外css样式控制的条件下，都放在布局结构中的时候，他们会呈现出不同的布局结果。经过提炼之后，我们可以将这些不同类型标签的表现形式简述如下：

(1) 块元素。霸道总裁性格。这类元素无论宽度大小，始终会占据页面中它高度范围内的那一整行空间，不会与其他元素共享。同时你可以任意控制块元素的宽高度，内填充等。常见的块元素有div，p，ul，li，h1~h6系列标签等。

(2) 行内元素。温柔谦让性格。这类元素的高度与宽度都是由其内部的文字元素撑开而成，你无法通过宽度等CSS控制项去操控它们的尺寸。它们只会占据属于自己的那一亩三分地，其他空间将会共享给同类的其他成员。常见的行内元素有strong，span，a，em等。

(3) 行内块元素。世故圆滑性格。上面两种类型的元素起始在某些布局情形之下，使用起来并不是特别便利。因此，行内块元素对上两种元素的优良特征进行了吸取，即允许我们控制其宽高尺寸，同时又可以将一行内多余的空间留给其他元素，从而实现指定尺寸元素并排显示的布局需求。常见的行内元素有img，input，button等。

第三，各类型标签之间的灵活转换。

在我们实际布局的过程当中，我们不可能有无限多个块元素、行内元素、行内块元素供我们选择使用。就算是有，我们也将需要花费很高的时间成本去掌握。为了我们能够更加灵活第使用各个标签元素。CSS提供了display的属性控制，让我们已有的各种类型的标签相互之间进行灵活的转换。

例如，我们一般使用div进行页面整体框架的搭建，那些横向并排且固定狂傲的布局需求我们就可以将div这种块元素，通过display:inline-block的方式转换为行内块元素，进而执行宽高设置及并排显示的控制。实例如下图：

其实上面的布局结构当中，不单单利用到了块元素转行内块的知识，也涉及到了行内元素(inline)的自然属性使用。例如其中课程初级、中级、高级的标识与看过人数的信息展示，这两个元素直接选择行内元素(如：span，em等)将是一种较为合理的方式。

我们也可以在一些特定的场景下，利用块元素强行占满整行的这种特征，让两个不需要并排的元素呈现自然换行的布局效果，实例如下图：

在华清远见互联学院中的这个大课分类布局中，课程的名称如果分别选择h1~h6系列标签中的一个，然后一句话简介选择段落p标签的话，将会是一个比较好的结构选型，其垂直方向自然换行排列。这样，只需要给整体的父级元素添加text-align:center属性控制，就可以实现水平居中效果。

第四，块元素思想的结论

根据以上理论的阐述及其在实战中的应用不难发现，盒模型及块元素思想的引入，可以让我们在页面布局的选型过程当中更加的灵活多变，同时又对整个结构做到足够的把控。在保证标签结构标准化的同时，高效地实现实战过程中各种布局需求。