CSS_行级元素与块级元素的转换

Mudrock__

已于 2022-04-20 21:09:50 修改

阅读量514

点赞数

分类专栏： CSS 文章标签： css

于 2022-04-20 21:08:31 首次发布

本文链接：https://blog.csdn.net/Mudrock__/article/details/124307382

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--
display 参数如下：
        inline 行元素
        block 块元素
        inline-block 是块元素 但是可以内联在一行
        none 使其消失
-->

代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    inline 行元素
    block 块元素
    inline-block 是块元素 但是可以内联在一行
    none 使其消失
    -->
    <style>
        #d1,#d2{
            width: 100px;
            height: 100px;
            border: 1px solid cornflowerblue;
            display: inline;
        }
        #s1,#s2{
            width: 100px;
            height: 100px;
            border: 1px solid cornflowerblue;
            display: block;
        }
        #s3,#s4{
            width: 100px;
            height: 100px;
            border: 1px solid cornflowerblue;
            display: inline-block;
        }
        #d3{
            width: 100px;
            height: 100px;
            border: 1px solid cornflowerblue;
            display: none;
        }
    </style>
</head>
<body>

<div id="d1">我们是行元素div</div>
<div id="d2">我们是行元素div</div>
<span id="s1">我们是块元素span</span>
<span id="s2">我们是块元素span</span>
<span id="s3">我们是块元素span，但是我可以内联在一行</span>
<span id="s4">我们是块元素span，但是我可以内联在一行</span>
<div id="d3">我是一个普通的div，但是你们在网页上看不见我，只能在源码中找到我</div>

</body>
</html>

运行效果

Mudrock__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS_行级元素与块级元素的转换

代码段<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- inline 行元素 block 块元素 i.
复制链接

扫一扫