位置: IT常识 - 正文
块元素和行内元素及其元素转换(块元素和行内元素区别)
发布时间：2024-01-16块元素和行内元素及其元素转换 
本文链接地址:https://www.jiuchutong.com/zhishi/297375.html
转载请保留说明！
推荐整理分享块元素和行内元素及其元素转换(块元素和行内元素区别)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:块元素和行内元素相互转换的属性是,块元素和行内元素举例,块元素和行内元素区别,块元素和行内元素举例,块元素和行内元素的特点,块元素和行内元素区别,块元素和行内元素相互转换的属性是,块元素和行内元素有哪些,内容如对您有帮助，希望把文章链接给更多的朋友！
怎么区分块元素、行内元素以及行内块元素呢，以及他们之间怎么相互转换呢？
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>加油，分享课堂笔记~
不当之处请大家及时指出，若有什么建议可以给我留言！ ❤笔芯
下一篇：YOLOv7（目标检测）入门教程详解---检测，推理，训练(yolov5目标检测代码)
