² 块特点

1. 独占一行

【资料图】

块标签的特点是独占一行，当设置两个<div>标签时，可以发现默认为上下排列。

2.支持所有样式

块标签支持所有样式，任何样式添加到块标签上都会起作用，包括盒子模型中的所有属性。

3.不设置宽时，其宽等于父标签宽

当块标签不设置宽是，其宽等于父标签的宽。

在盒子模型中，当不设置宽，只设置内边距时，宽等于父标签宽减去子标签的内边距。

² 内联特点

1.在一行显示

当设置两个<span>标签时，可以发现默认为显示在一行左右排列。

2.不支持宽高，在margin和padding也有一些问题

<span>标签不支持宽高，即当给<span>标签设置宽高时，不起作用。

<span>标签在margin和padding上也会有一些问题，当设置margin和padding边距时，上下内外边距显示可能会出现问题，左右内外边距显示没有问题。

3.宽度由内容撑开

前面讲到，内联标签不支持宽高。内联标签的宽由内容撑开，高也由内容决定。

4.代码换行会被解析

上面的案例中可以看出两个<span>标签之间会有一个小空隙，这是因为代码换行被解析。

当把两行定义<span>标签的代码写到一行时，空隙就会消失。

² 块标签与内联标签的比较

1. 区别

块标签的特点是独占一行、支持所有的样式和当块标签不设置宽时，等于父标签宽。内联标签的特点是在一行显示、不支持宽高，margin和padding也有问题、宽度由内容撑开和代码换行会被解析。

2. 分类

HTML标签大致可划分为块与内联这两大类，其中具有块特点的标签有<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>和<p>标签等。有内联特点的标签有<strong>、<em>、<sub>、<sup>、<del>、<ins>、<blockquote>、<q>、<abbr>、<address>、<cite>和<a>标签等。

3.适合场景

因为块标签支持所有样式，并且兼容性极好，因此非常适合用于网页布局。而内联标签由于很多样式不支持，并且代码换行会被解析出小空隙，因此不适合用于网页布局，一般只用于内容修饰和语义化。