行内元素和块状元素的区别
作者：互联网
一、定义
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的
二、行内元素和块级元素各自的特点
区块元素
块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。块级元素有以下几个特点：
- 总是另起一行（特立独行）
- 可以设置其宽度、高度，内外边距
- 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
- 可以容纳行内元素和其他块元素。
行内元素
行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。行内元素的特点：
- 总是和相邻的行内元素在同一行上（物以类聚）
- 设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
- 默认宽度是他自身内容的宽度。
- 行内元素只能容纳其他行内元素或者文本。
三、行内和区块元素的差别
（1).块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
(2). 一般情况下，块级元素可以设置 width,height属性，行内元素设置width, height无效 (注意：块级元素即使设置了宽度，仍然是独占一行的)
(3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
四、常见的块状元素和行内元素
1、块状元素
| <address> | 定义地址 |
| <caption> | 定义表格标题 |
| <div> | 定义文档中的分区或节 |
| <dl> | 定义列表 |
| <dt> | 定义列表中的项目 |
| <fieldset> | 定义一个框架集 |
| <form> | 创建HTML表单 |
| <h1><h2><h3><h4><h5><h6> | 定义标题 |
| <hr> | 创建一条水平线 |
| <legend> | 元素为<fieldset>标签定义标题 |
| <li> | 标签定义列表项目 |
| <noframes> | 为那些不支持框架的浏览器显示文本，于<frameset>元素内部 |
| <noscript> | 定义在脚本未被执行时的替代内容 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <p> | 标签定义段落 |
| <pre> | 定义预格式化的文本 |
| <table> | 定义HTML表格 |
| <tbody> | 定义表格主体(正文) |
| <td> | 表格中的标准单元格 |
| <tfoot> | 定义表格的页脚(脚注或表注) |
| <th> | 定义表头单元格 |
| <thead> | 标签定义表格的表头 |
| <tr> | 定义表格中的行 |
2、行内元素
| a | 定义链接 |
| b | 字体加粗 |
| code | 定义计算机代码文本 |
| em | 定义为强调的内容 |
| img | 定义图片 |
| input | 输入框 |
| label | 为input元素定义标记 |
| span | 组合文档中的行内元素 |
| strong | 语气更强的强调内容 |
| sub | 定义下标文本 |
| sup | 定义上标文本 |
| textarea | 定义多行输入框 |
五、块状元素和内联元素之间的相互转换
1、块元素与内联元素之间的转换
关于块级元素与内联元素之间的转换我们可以使用css解决，使用CSS以后块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
2、display：inline与display：block
display：inline：显示为内嵌，使快元素转换为内联元素同时具备内联元素标签的特征。
display：block：显示为块，使内联元素转换为块级元素同时具备块元素标签的特征。
3、块级元素转内联元素，display：inline的使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span, em{
height: 200px;
background-color: yellow;
width: 200px;
margin: 50px;
display: block;
}
</style>
</head>
<body>
<span>span1</span>
<em>em2</em>
</body>
</html>4、内联元素转块级元素，display：block的使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span, em{
height: 200px;
background-color: yellow;
width: 200px;
margin: 50px;
display: block;
}
</style>
</head>
<body>
<span>span1</span>
<em>em2</em>
</body>
</html>
标签：块级,行内,定义,元素,块状,内联,display 来源： https://blog.csdn.net/RumAscar/article/details/110259452