简述块元素和行内元素的概念及特性（块元素和行内元素及其元素转换）
导读：怎么区分块元素、行内元素以及行内块元素呢，以及他们之间怎么相互转换呢？...
怎么区分块元素 、行内元素以及行内块元素呢 ，以及他们之间怎么相互转换呢？
1 、块元素
特点：
独占一行 可以对其设置 宽 、高 、内外边距 宽度默认为容器的100% 布局时 ，块元素可以包含块元素和行内元素常见的块元素：
注： 文字类的元素内不能使用块元素 ，例如：p 、h1~h6.2 、行内元素
特点：
同行多个显示 宽 、高直接设置无效 ，可以设置margin和padding的左右 默认宽度由内容撑开 布局时 ，行内元素一般不包含块级元素常见的行内元素：
注：
链接中不能再嵌套链接3 、行内块元素
同时具备块元素和行内元素的特点 。
特点： 和相邻行内元素（行内块）在一行上 ，但是他们之间会有空白缝隙 。一行可以显示多个 默认宽度由内容撑开 可以对其设置 宽 、高 、内外边距行内块元素：img 、input 、td
4 、相互转换
行内元素转换为块元素：display：block； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行转块</title> </head> <body> <!-- 行内元素转换为块元素 --> <img src="../images/nature.jpg"> <img src="../images/nature.jpg"> <img src="../images/nature.jpg"> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行转块</title> <style> img { display: block; } </style> </head> <body> <!-- 行内元素转换为块元素 --> <img src="../images/nature.jpg"> <img src="../images/nature.jpg"> <img src="../images/nature.jpg"> </body> </html> 块元素转换为行内元素：display：inline； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块转行</title> </head> <body> <!-- 块元素转换为行内元素 --> <p>块转行</p> <p>块转行</p> <p>块转行</p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块转行</title> <style> p { display: inline; } </style> </head> <body> <!-- 块元素转换为行内元素 --> <p>块转行</p> <p>块转行</p> <p>块转行</p> </body> </html> 行内元素转换为行内块元素：display：inline-block； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内转行内块</title> <style> span { display: inline-block; } </style> </head> <body> <!-- 行内元素转换为行内块元素 --> <span>行内转行内块</span> <span>行内转行内块</span> <span>行内转行内块</span> </body> </html>加油 ，分享课堂笔记~
不当之处请大家及时指出 ，若有什么建议可以给我留言！
❤笔芯创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！