小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
块级元素与内联元素
在C5S中比较广泛应用于HTML元素的“盒子”共有3种，导致HTML元素主要有3种:
-
块级元素:每个元素独占一行，块级元素之间是垂直方向排列。
-
内联元素:每个元素不会独占一行，内联元素之间是水平方向排列。
-
行内块级元素:每个元素不会独占-行，行内块级元素之间也是水平方向排列。但行内块级元素与内联元素还是有区去别的。
块级元素
每一个块级元索都会产生换行，也就是说，每一个块级元素都是独占一行的。所以，多个块级元索之间就是垂直方向的排列规则。例如<hl> ~ <h6>标题元素、<p> 段落元素等都是块级元素。两个<p> 元素都不是独占一行的，也就是水平方向排列的。不仅如此，内联元素通过 CSS 的 width 属性和 height 属性设置该元素的宽度和高度是无效的，但是盒子模型中的边框、内边距和外边距也都是有效的。
注意：行内块级元素允许设置width和height；内联不能设置width和height。内联元素中是不能包含块级元素的。
内联元素
每一个块级元索都会产生换行，也就是说，每一个块级元素都是独占一行的。所以，多个块级元索之间就是垂直方向的排列规则。例如<hl> ~ <h6>标题元素、<p> 段落元素等都是块级元素。两个<p> 元素都不是独占一行的，也就是水平方向排列的。不仅如此，内联元素通过 CSS 的 width 属性和 height 属性设置该元素的宽度和高度是无效的，但是盒子模型中的边框、内边距和外边距也都是有效的。
注意：内联元素中是不能包含块级元素的。
<spen>元素同样也是内联元素，该元素与 <div> 元素类似的是它们都是无语义化元素。 元素常用来专门为 HTML 页面中的文本设置样式等作用。
行内块级元素
行内块级元素的特点实际上是将块级元素和内联元素的特点进行综合。所以，行内块级元素的特点在于：
-
每一个行内块级元素不会独占一行。也就是说，行内块级元素之间是水平方向进行排列。这一点类似于内联元素。
-
行内块级元素可以通过 CSS 的 width 属性和 height 属性设置该元素的宽度和高度的。这一点类似于块级元素。
-
行内块级元素中，盒子模型中的边框、内边距和外边距也都是有效的。
两个
<img>元素是按照水平方向进行排列，并且两个<img>元素之间存在着空白区域。这个空白区域是由行内块级元素在浏览器运行解析时自动产生的，大概是5px左右的间隙。
注意：行内块级元素的对齐方式:其内容下边对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块级元素</title>
<style>
button {
/* 行内块级元素: 允许设置width和height属性 */
width: 500px;
height: 500px;
}
/* 行内块级元素的对齐方式: 其内容下边对齐 */
div {
display: inline-block;
width: 500px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<button>这是第一个按钮</button><button>这是第二个按钮</button>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit necessitatibus nesciunt voluptatem facilis ipsa eos
tempore, dicta accusantium? Earum aliquid iste sapiente sequi est? Et mollitia amet ad maiores saepe?
</div>
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa dicta dolor aspernatur culpa repellat, laudantium,
aliquid sunt exercitationem, eligendi nihil optio totam quas necessitatibus numquam quae facilis repudiandae odio
ut!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore error sed, maxime sint esse quidem reprehenderit
culpa id accusamus laudantium aliquam! Ipsa iste ipsum excepturi labore itaque quod laudantium deleniti!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum sunt veniam facilis fugit recusandae? Officia nisi
maxime possimus distinctio delectus soluta accusamus quas dolor incidunt, sit accusantium natus? Facilis,
perferendis.
</div>
</body>
</html>
文档流
所谓的文档流指的是浏览器运行并解析 HTML 页面的时候，会按照一套固定的机制来进行解析运行。再具体一些的话，就是浏览器运行 HTML 页面时，页面中的元素是如何来布局的。
例如块级元素会独占一行，内联元素的 width 属性和 height 属性是无效的等这些块级元素、内联元素以及行内块级元素的特点都是浏览器为解析 HTML 页面所提供的默认的机制。而这套机制称为页面流或文档流。
display属性
HTML 页面中的元素默认情况可以划分为块级元素、内联元素和行内块级元素等。在 CSS 中提供了 display 属性，该属性可以修改任何 HTML 元素为指定类型的元素。
注意：实际情况是 HTML 元素不仅分为块级元素、内联元素和行内块级元素，例如 <table> 元素就不属于这三者任意一个。
CSS 的 display 属性提供如下 3 个值对应块级元素、内联元素和行内块级元素：
-
block：将 HTML 元素设置为块级元素。
-
inline：将 HTML 元素设置为内联元素。
-
inline-block：将 HTML 元素设置为行内块级元素。
