微速讯：块与内联
² 块特点
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.适合场景
因为块标签支持所有样式，并且兼容性极好，因此非常适合用于网页布局。而内联标签由于很多样式不支持，并且代码换行会被解析出小空隙，因此不适合用于网页布局，一般只用于内容修饰和语义化。
标签：
X 关闭
X 关闭
