HTML块元素和内联元素DIV和SPAN

HTML 的块元素（Block-level Element）

• 块元素有一个特点：独占一行，在它下面的元素会自动换行

<div>你好吗</div><p>点文网校</p>Code language: HTML, XML (xml)

上面代码中，<div> 和 <p> 都是块元素，所以即使写在同一行，<p> 也会另起一行显示

常见的块元素

标签	说明
h1 ~ h6	标题（原文写 h1-7，标准是 h1-h6）
p	段落
ul	无序列表
table	表格
div	通用块容器

内联元素（Inline Element）

• 内联元素不会独占一行
• 如果它右侧能够放得下后面的元素，那么后面的元素就会在它右边显示

<span>你好</span><a href="#">点文网校</a>Code language: HTML, XML (xml)

上面代码中，<span> 和 <a> 都是内联元素，它们会排在同一行（如果宽度够的话）

常见的内联元素

标签	说明
b	加粗
td	表格单元格
img	图片
span	通用内联容器
a	超链接

块元素 vs 内联元素 对比

对比项	块元素（Block）	内联元素（Inline）
是否独占一行	是	否
默认宽度	撑满父容器 100%	由内容撑开
能否设置宽高	可以	不生效（除非改 display）
常见标签	div、p、h1-h6、ul、table	span、a、img、b、td

通过 CSS 改变元素类型

• 内联元素和块元素的显示方式可以通过 CSS 来改变

/* 把块元素变成内联 */
div {
    display: inline;
}

/* 把内联元素变成块 */
span {
    display: block;
}

/* 既能设置宽高，又不独占一行 */
div {
    display: inline-block;
}Code language: CSS (css)

CSS 属性值	效果
display: block	变成块元素（独占一行）
display: inline	变成内联元素（不换行）
display: inline-block	不独占一行，但可以设置宽高​

inline-block 是最常用的，比如想让多个 div 横着排又能控制大小，就用它