java行内元素和块级元素.

本文详细介绍了行内元素(如span、a等)与块级元素(如div、p等)的区别,包括显示方式、盒模型、容纳内容和默认换行。还展示了如何通过CSS的display属性将两者互相转换,以及某些元素的灵活性。
摘要由CSDN通过智能技术生成

🍒1.什么是行内元素?

1、行内元素
span、a、br、b、strong、img、input、textarea、select、sup、sub、em、del

行内元素:

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属性修改为块级元素。同时,也有一些标签具有混合性质,既可以作为块级元素使用,又可以作为行内元素使用,如

和 。

🍋最后🍋

总结不易,希望小宝们不要嫌弃哦!😀

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值