java行内元素和块级元素.

java行内元素和块级元素.本文详细介绍了行内元素 如 span a 等 与块级元素 如 div p 等 的区别 包括显示方式 盒模型 容纳内容和默认换行

大家好,欢迎来到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 也就是变成行内块元素 

代码演示:

  1. 首先给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

(0)
上一篇 2025-03-15 13:05
下一篇 2025-03-15 13:10

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信