大多数 HTML 元素被定义成 块级元素(block) 、 内联元素(inline)以及内联块级元素(inline-block)。

这些不同元素的定义，用于页面内容的设计呈现。

通过我们以元素 div 和 span 作为例子，来讲述块级元素(div)和内联元素(span)。

块级元素 (block)

块级元素 在浏览器呈现时，以新行来开始结束。简单理解为，它与前面和后面的内容之间有回车。

所以它独占一行，并可以设置宽度，高度，边距等样式。这些样式的设定，通常使用 CSS 实现。

在后面的示例中，我们都使用 CSS 来设置元素的样式，以方展示它们的特性。

块级元素适用于页面的结构布局，作为内容的容器等。

除了 div，如下元素也是块级元素，了解一下就好，需要时再查。

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> - <h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

块级元素 div 示例

<div style="background-color: red; ">这是第一个块状元素。</div> <div style="background-color: red; ">这是第二个块状元素。</div> <br /> <div style="background-color: red; height: 40px; width: 300px;">   这是第三个块状元素, 指定了高度为40px. </div> 

效果如下：

这个示例使用了嵌入式 CSS，指定背景色(background-color)，宽度(width) 和高度 (height)。

可以清楚地看到，块级元素，默认占满显示宽度，所以第二个块状元素在第一个下面（新行，独占一行。），且宽度和高度都可以通过 CSS 指定（第三个块状元素）。

内联元素 (inline)

内联元素 在浏览器呈现时，不会以新行开始。也称为行内元素，不会独占一行，宽度由其内容决定。不可设定宽度和高度。

内联元素除了典型的 span，其它的还有如下，同样，了解一下即可，需要的时候查看。

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

内联元素 span 示例

<span style="background-color: green;">这是第一个内联元素.</span> <span style="background-color: green;">这是第二个内联元素.</span> <br /> <span style="background-color: green; height: 40px; width: 300px;"   >这是第三个内联元素, 指定了高度为40px.</span > 

效果如下：

同样使用了 CSS 对背景色(background-color)，宽度(width) 和高度 (height)进行指定。

和块级元素不同，内联元素并没有占满一行，所以第二个内联元素显示在了第一个后面，默认有间距。

同时也能看到，即使为内联元素指定了宽度和高度，也没有起作用（第三个内联元素）。

内联块级元素 (inline-block)

内联块级元素和内联元素类似，唯一的不同，是它可以指定宽度和高度。

这里我们拿 span 元素，通过 CSS 改变它的显示，从 inline 到 inline-block，对比上面的示例，可以看到明显的差别。

<span style="display: inline-block; background-color: green;"   >这是第一个内联块级元素.</span > <span style="display: inline-block; background-color: green;"   >这是第二个内联块级元素.</span > <br /> <span   style="display: inline-block; background-color: green; height: 40px; width: 400px;"   >这是第三个内联块级元素, 指定了高度为40px. </span> 

效果如下：

上述代码只是增加了 dipslay，把 span 从 inline 修改成了 inline-block。

这样指定之后，可以看到第三个 span 指定的高度和宽度都生效了。

同时也注意到，第三个 span 与上面的之间没有了间距。这些细节在后面的 CSS 里再讲述。

总结

• 🍑 块级元素(block)总是开始新行并占据整个宽度，它的宽度和高度可以修改。

• 🍑 内联元素(inline) 不独占一行，且宽度取决于它的内容，赛诺和高度不可修改。

• 🍑 内联块级元素(inline-block)与内联元素类似，唯一的区别是它的高度和宽度和 block 一样可以修改。