HTML行级元素和块级元素区别和转化（displays属性）

最新推荐文章于 2025-03-20 04:30:00 发布

轻易搜

最新推荐文章于 2025-03-20 04:30:00 发布

阅读量2.6w

点赞数 18

分类专栏：个人HTML笔记文章标签： html display属性行级元素和块级元素

本文链接：https://blog.youkuaiyun.com/qingyisuo/article/details/78959942

版权

个人HTML笔记专栏收录该内容

20 篇文章

订阅专栏

1.块级标签与行级标签的区别：
1.块级元素可以设置宽高，行级元素不能设置宽高（只能根据文字来设置，比较特殊的是img\input是可以设置宽高）；
2.块级元素是独占一行，行级元素不行；

2.块级元素和行级元素的转化
a.块级转行级
例子：div->行级

1.div为正常的块级标签时，与span行级文字时

<head>
        <meta charset="UTF-8">
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                outline: 1px dashed red;//1像素红色虚线
            }
        </style>
    </head>
    <body>
        <div>我是div</div>啊啊啊啊
        <span> aaaaaa</span>
    </body>
</html>

效果如图：这里写图片描述
2. div—>行级(display:inline),这里只贴出div的样式，其他的与上面一致。

            div{
                width: 200px;
                height: 200px;
                outline: 1px dashed red;
                display: inline;
                /*转化为行级标签这时div设置的宽高无效,因为行级标签不能设置宽高*/
            }

效果如图：
这里写图片描述

解析：转化为行级标签这时div设置的宽高无效,因为行级标签不能设置宽高，

b.行级转块级
例子：span->块级（display:block）

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                width: 200px;
                height: 200px;
                outline: 1px dashed red;
                display: block;/*转化为块级标签*/
            }
        </style>
    </head>
    <body>
        <span>aaaaaa</span>
        啊啊啊 
    </body>
</html>

效果如图：
这里写图片描述

c.行级转块级但是又不独占一行
span—>块级但是不独占一行（display：online-block）
例子（代码基本与b的例子一致，就是display属性不一样）：

        span{
                width: 200px;
                height: 200px;
                outline: 1px dashed red;
                display: inline-block;/*转化为块级标签*/
            }
        </style>

效果如图所示

这里写图片描述

解析：对比c和b举的例子可以比较清楚的发现，虽然c已经转化成了块级元素，但是没有独占一行。

总结

1.display:inline;//将块级元素转化为行级元素，这时块级元素设置的宽高无效
2.display:block;//将行级元素转块级元素，这时原本的行级元素会变成块级元素独占一行，同时可以设置宽高
3.display:inline-block;//将行级元素转块级元素，不会独占一行，可以设置宽高

ps:突然发现这个Markdown编辑器有很多bug…