＜云上小悟＋

HTML之块级元素和内联元素

2017年10月16日 / 70次阅读
HTML

HTML元素在显示的时候，分为两种，块级元素（block）和内联元素（inline）。

简单来说，块级元素就是按照块的方式来显示，浏览器都会用新的一行来显示块级元素；而内联元素则不会重新开启一行，inline就是这个意思。

常见的块级元素有：

<h1>
<p>
<ul>
<table>
<div>
......

常见的内联元素有：

<br>
<strong>
<img>
<span>
<a>
......

通过CSS可以修改元素的这个属性：

p {
    display:inline 
}
img {
    display:block 
}

以上CSS代码，将p元素修改为内联元素，将img修改为块元素。

麦新杰多说几句，关于内联元素，有这个意识的好处是在编写HTML代码的时候，注意在内联元素之间不需要回车。这个回车换行只是在文档内能看到，在浏览器中，这个回车换行就会被显示为一个空格（chrome），如果你使用的不是等宽字体，有的时候这个多余的空格很难发现。比如下面的代码：

<a href="https://www.maixj.net/about">关于</a>
<a href="https://www.maixj.net/xiaowuzhi">小悟志</a>
<a href="https://www.maixj.net/sitemap">网站地图</a>
<a href="https://www.maixj.net/archive">归档</a>
<a href="https://www.maixj.net/links">友情链接</a>
<a href="https://www.maixj.net/contact-us">联系</a>
<a href="https://www.maixj.net/feed">Feed</a>

这段代码在编辑的时候看着很舒服，但是在浏览器显示的时候，各个连接之间不会换行，反而多出来一个空格。如果你使用 来增加间隔，由于文本中多出来的回车换行，间隔会变大一点，而且很难察觉。这时，将代码修改为这样，去掉回车换行，用空格来间隔（下面的示例使用的是&emsp;空格，这个空格在微软雅黑字体的时候比较宽，推荐阅读：HTML中空格的宽度）

<a href="https://www.maixj.net/about">关于</a>&emsp;<a href="https://www.maixj.net/xiaowuzhi">小悟志</a>&emsp;<a href="https://www.maixj.net/sitemap">网站地图</a>&emsp;<a href="https://www.maixj.net/archive">归档</a>&emsp;<a href="https://www.maixj.net/links">友情链接</a>&emsp;<a href="https://www.maixj.net/contact-us">联系</a>&emsp;<a href="https://www.maixj.net/feed">Feed</a>

虽然编辑时，看着不太爽（以上代码端的换行，是浏览器自动显示的效果，实际上没有换行），但是浏览器显示效果很好。

总结本文的目的，就是觉得需要在编写HTML代码的时候，有块级元素和内联元素的意识。

本文链接：https://www.maixj.net/wz/kuaiji-neilian-16892