一文读懂块状元素和内联元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一文读懂块状元素和内联元素相关的知识,希望对你有一定的参考价值。

很多刚入坑前端的同学一直不懂div和span两个无语义标签有什么区别。那么,有什么区别呢?
答案就是div是块状元素,span是内联元素。


那么,块状元素(block)和内联元素(inline)又有什么区别呢?
块状元素:
后面的元素会从另起一行开始
高度,行高以及顶、底边距都可控制
宽度是它所在容器的100%,或者自己设定一个宽度
内联元素:
和其它元素都在一行上,需要使用br标签进行换行
高度,行高以及顶、底边距不可改变
宽度就是它所容纳的子元素的宽度,不可改变


块状元素与内联元素的相互转换:通过css控制
块状元素转化为内联元素:css设置display:inline
内联元素转化为块状元素:css设置display:block

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块状元素和内联元素的转换</title>
<style>
#inline_to_block{
display: block;
}
#block_to_inline{
display: inline;
}
</style>
</head>
<body>
<span>我是span</span>
<span id="inline_to_block">我换行啦</span><!--如果成功转化块状元素,则会另起一行 -->
<span>我测试下</span>
<hr>
<div>我是div</div>
<div id="block_to_inline">我不换行了</div><!--如果成功转化内联元素,则不会另起一行 -->
<span>我测试下</span>
</body>
</html>
结果如下:
技术分享图片


常见块状元素和内联元素如下:
块状元素:
 address - 地址
 center - 举中对齐块
 dir - 目录列表
 div - 常用块级元素,无语意
 dl - 定义列表
 fieldset - form控制组
 form - 交互表单
 h1~h6 - 标题
 hr - 水平分隔线
 menu - 菜单列表
 li - 列表
 ol - 有序列表
 ul - 无序列表
 p - 段落
 pre - 格式化文本
 table - 表格

内联元素:
 a - 锚点
 b - 粗体
 big - 大字体
 br - 换行
 code - 计算机代码
 em - 强调
 font - 字体设定
 i - 斜体
 img - 图片
 input - 输入框
 label - 表格标签
 small - 小字体文本
 span - 常用内联元素,无语义
 strong - 粗体强调
 sub - 下标
 sup - 上标
 textarea - 多行文本输入框

以上是关于一文读懂块状元素和内联元素的主要内容,如果未能解决你的问题,请参考以下文章

内联块状元素

css 块状元素与行内元素(内联元素)的理解

元素分类--内联块状元素(特点:同行, 可设置宽高和边距)

内联块状元素说明

块状元素与内联(行内)元素的嵌套规则

块级元素和内联元素的区别