[快速入门前端 25] HTML 元素的 Display 方式

HTML 元素的显示方式

在之前学习 HTML 的内容中，我们会发现每个元素预设的特定都不太一样，有些会独佔一整行的空间，例如 <p>、<div>，有些则是会接续上个元素在同行排列，例如 <a>、<span> 等。这是因为 <div> 属于区块元素，而 <a> 则属于行内元素，接下来就让我们介绍不同种类元素间的差异吧！

行内元素 inline

元素宽高由内容撑开相邻的元素会显示在同一行，若一行无法显示则在下一行继续由左到右排列无法用 CSS 设定宽高代表元素：<a>、<span>、<label> 等文本相关标籤

区块元素 block

在页面中独佔一整行，预设宽度为父元素的最大宽度，预设高度需要用内容撑开可以用 CSS 指定宽高元素由内而外依序由 content ( 内容 )、padding ( 内间距 )、border ( 框线 )、margin ( 外间距 ) 构成代表元素：h 系列、<p>、<div>、<table>、<ul>、<form> 等

行内区块 inline block

元素宽高由内容撑开相邻的元素会显示在同一行，若一行无法显示则在下一行继续由左到右排列可以用 CSS 设定宽高同时拥有行内和区块元素的特性，既有行内元素的排版，又可以指定宽高代表元素：<img>、<td>、<input>、<select>、<button>、<iframe> 等

修改元素显示方式

上面所说的元素显示方式我们可以透过 display 来进行修改，主要有 none、inline、inline-block、block 几种常见的属性值。

none：使元素被隐藏inline：将元素变为行内显示inline-block：将元素变为行内区块显示block：将元素变为区块显示

範例：

a {    display: inline-block; /* 将 a 从 inline 改为 inline-block，可设宽高且在同一行 */    background-color: lightblue;    height: 60px;    width: 400px;}div {    display: inline; /* 将 div 从 block 改为 inline，与前面的元素在同一行 */    background-color: lightgreen;    height: 40px; /* inline 元素无法设定宽高，CSS 失效 */}span {    display: block; /* 将 span 由 inline 改为 block，独佔一行且可设定宽高 */    background-color: lightsalmon;    height: 60px;}

---

上一篇：[快速入门前端 24] CSS 常见属性(4) 背景和滑鼠动态属性
下一篇：[快速入门前端 26] CSS Box Model 盒子模型
系列文章列表：[快速入门前端] 系列文章索引列表