大家好，欢迎来到IT知识分享网。
🍒1.什么是行内元素?
行内元素：
1.和相邻的行内元素在一行上。 2.高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效。 3.默认的宽度就是它本身的宽度。 4.行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）。 行内元素的使用
行内元素常用标签代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内元素和块级元素</title> <!--首先给div跟span设置一个背景颜色--> <style> .within{
background-color: orange; } </style> </head> <body> <!--行内元素--> <a class="within">我是a,我是行内元素</a> <b class="within">我是b,我是行内元素</b> <span class="within">我是span,我是行内元素</span> <select class="within">我是select,我是行内元素</select> <strong class="within">我是strong,我是行内元素</strong> </body> </html> 运行效果如下：
这里也就体现出了行内元素不会独占一行。
🥭2.什么是块级元素?
块级元素：
1.块级元素会独占一行。 2.高度，行高，外边距和内边距都可以单独设置。 3.宽度默认是容器的100%。 4.可以容纳内联元素和其他的块级元素。 块级元素的使用
块级元素常见标签代码使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内元素和块级元素</title> <style> .block{
background-color: #00ffff; } </style> </head> <body> <!--块级元素--> <ol class="block">我是ol,我是块级元素</ol> <ul class="block">我是ul,我是块级元素</ul> <p class="block">我是p,我是块级元素</p> <dl class="block">我是dl,我是块级元素</dl> <div class="block">我是div,我是块级元素</div> <h1 class="block">我是h1,我是块级元素</h1> <h class="block">我是h,我是块级元素</h> </body> </html> 运行结果如下：
这里也就体现出了块级元素会独占一行。
🍊3.行内元素和块级元素的区别?
三、区别：
显示方式：块级元素以块的形式显示，单独占据一行，并从上到下排列，会自动换行；而行内元素与其他元素共享一行，从左到右排列，不会独占一行。
盒模型：块级元素可以设置宽度、高度、内外边距等样式属性，其大小由内容和盒模型属性决定；而行内元素的宽度和高度默认由内容决定，无法直接设置。
容纳内容：块级元素可以容纳其他块级元素和行内元素；而行内元素只能容纳其他行内元素或纯文本内容，不能包含块级元素。
默认换行：块级元素会在新行上开始，默认情况下会自动换行；而行内元素不会自动换行，在超出父容器宽度时可能被截断或溢出。
CSS布局：使用块级元素可以实现更灵活的布局和组织网页内容的结构；而使用行内元素可以对文本内容进行精确控制和样式化。
🍅4.行内元素和块级元素的相关转换
display 属性 **三个属性：inline block inline-block** 下面依次介绍三个属性：
inline:
值为 inline 将变成行内元素，比如 div 不能设置宽高，和行内元素并排 block:
值为 block 的，比如 span 能设置宽高（填充父级），独占一行。 inline-block
值为 inline-block 也就是变成行内块元素 代码演示：
- 首先给div跟span设置一个背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内元素和块级元素</title> <!--首先给div跟span设置一个背景颜色--> <style> .div{
background-color: pink; } .span{
background-color: orange; } </style> </head> <body> <!--行内元素--> <div class="div">我是div</div> <span class="span">我是span</span> </body> </html> 效果如下：
2.使用display 属性转换行内，块级元素:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内元素和块级元素</title> <!--首先给div跟span设置一个背景颜色--> <style> .div{
background-color: pink; /*转化成行内元素*/ display: inline; } .span{
background-color: orange; /*转化成块级元素*/ display: block; } </style> </head> <body> <!--行内元素--> <div class="div">我是div</div> <span class="span">我是span</span> </body> </html> 效果如下：
3.再把div和span转换为行内块元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内元素和块级元素</title> <!--首先给div跟span设置一个背景颜色--> <style> .div{
background-color: pink; /*转换为行内块元素*/ display: inline-block; } .span{
background-color: orange; /*转换为行内块元素*/ display: inline-block; } </style> </head> <body> <!--行内元素--> <div class="div">我是div</div> <span class="span">我是span</span> </body> </html> 效果如下:
🍏5.注意：
需要注意的是，并非所有HTML标签都严格遵循这两种分类。有些标签根据上下文环境可以表现为块级或行内元素，这被称为”可替换元素”。例如标签默认是行内元素，但可以通过CSS的display属性修改为块级元素。同时，也有一些标签具有混合性质，既可以作为块级元素使用，又可以作为行内元素使用，如
🍋最后🍋
总结不易，希望小宝们不要嫌弃哦!😀
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/151163.html
