元素转换（四种）

最新推荐文章于 2024-06-06 16:07:06 发布

正在修炼web的小芮

最新推荐文章于 2024-06-06 16:07:06 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/m0_71814235/article/details/125632385

版权

css 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、块元素转成行内元素

借助display进行转换。

display是“显示模式”的意思，用来改变元素的行内、块级性质。

display: inline；

inline就是“行内”。

将块元素转成行内元素

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 700px;
            overflow: hidden;
            outline: 1px solid orange;
        }
        .son{
            width: 200px;
            height: 200px;
            /* 将块元素 转成 行内元素 ,元素的宽度和高度的属性就失效了！*/
            /* display: inline；
             inline就是“行内”。 */
            display: inline;
        }
        .son1{background-color: red;}
        .son2{background-color: green;}
        .son3{background-color: blue;}
    </style>
</head>
<body>
    <div class="parent">
        <!-- div.son.son1+div.son.son2+div.son.son3 -->
        <div class="son son1">盒子1</div>
        <div class="son son2">盒子2</div>
        <div class="son son3">盒子3</div>
    </div>  
</body>

效果预览图

2、块元素转成行内块元素

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 700px;
            overflow: hidden;
            outline: 1px solid orange;
        }
        .son{
            width: 200px;
            height: 200px;
            /* 将块元素 转成 行内块元素 */
            display: inline-block;
        }
        .son1{background-color: red;}
        .son2{background-color: green;}
        .son3{background-color: blue;}
    </style>
</head>
<body>
    <div class="parent">
        <!-- div.son.son1+div.son.son2+div.son.son3 -->
        <div class="son son1">盒子1</div>
        <div class="son son2">盒子2</div>
        <div class="son son3">盒子3</div>
    </div>
    </body>

效果预览图

3、行内元素转成块级元素

借助display进行转换。

display是“显示模式”的意思，用来改变元素的行内、块级性质。

“block”是“块”的意思。

将行元素转成块元素

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 700px;
            overflow: hidden;
            outline: 1px solid red;
        }
        .son{
            width: 200px;
            height: 200px;
            /* 将行元素 转成 块元素 */
             display: block;
        }
        .son1{
            background-color: pink;
        }
        .son2{
            background-color: yellowgreen;
        }
        .son3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <span class="son son1">盒子1</span>
        <span class="son son2">盒子2</span>
        <span class="son son3">盒子3</span>
    </div>
</body>

效果预览图

4 、行元素转成行内块元素

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 700px;
            overflow: hidden;
            outline: 1px solid red;
        }
        .son{
            width: 200px;
            height: 200px;
            /* 将行元素 转成 块元素 */
             display: block;
        }
        .son1{
            background-color: pink;
        }
        .son2{
            background-color: yellowgreen;
        }
        .son3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <span class="son son1">盒子1</span>
        <span class="son son2">盒子2</span>
        <span class="son son3">盒子3</span>
    </div>
</body>

效果预览图