java行内元素和块级元素.

Happy Moment!

已于 2023-12-20 19:04:01 修改

阅读量663

点赞数 28

文章标签： html5 css

于 2023-12-11 09:33:45 首次发布

本文链接：https://blog.csdn.net/2301_78753262/article/details/134918736

版权

🍒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 也就是变成行内块元素

代码演示：

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