元素转换（四种）

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>

效果预览图

相关阅读:
web前端-javascript-for循环练习(1-100所有奇数和，1-100所有7的倍数个数及总和，打印水仙花数，判断是否是质数)
ElasticSearch浅谈
洛谷 P3131 [USACO16JAN] Subsequences Summing to Sevens S
给C#新增一个时间类型: YearMonth
【mcuclub】超声波测距模块HC-SR04
Python <算法思想集结>之抽丝剥茧聊动态规划
深入探究序列化与反序列化：原理、应用和最佳实践
VUE、.NET多文件的上传、接收
cookie、localStorage 和sessionStorage
Shell编程从看懂到看开①(Shell概述、变量、运算符、条件判断)

原文地址：https://blog.csdn.net/m0_71814235/article/details/125632385