• 元素转换（四种）

    1、块元素转成行内元素

    借助display进行转换。

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

    display: inline；

    inline就是“行内”。

    将块元素 转成 行内元素

    1. <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 700px;
    8.             overflow: hidden;
    9.             outline: 1px solid orange;
    10.         }
    11.         .son{
    12.             width: 200px;
    13.             height: 200px;
    14.             /* 将块元素 转成 行内元素 ,元素的宽度和高度的属性就失效了！*/
    15.             /* display: inline；
    16.              inline就是“行内”。 */
    17.             display: inline;
    18.         }
    19.         .son1{background-color: red;}
    20.         .son2{background-color: green;}
    21.         .son3{background-color: blue;}
    22.     </style>
    23. </head>
    24. <body>
    25.     <div class="parent">
    26.         <!-- div.son.son1+div.son.son2+div.son.son3 -->
    27.         <div class="son son1">盒子1</div>
    28.         <div class="son son2">盒子2</div>
    29.         <div class="son son3">盒子3</div>
    30.     </div>  
    31. </body>

    效果预览图

     

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

    1.    <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 700px;
    8.             overflow: hidden;
    9.             outline: 1px solid orange;
    10.         }
    11.         .son{
    12.             width: 200px;
    13.             height: 200px;
    14.             /* 将块元素 转成 行内块元素 */
    15.             display: inline-block;
    16.         }
    17.         .son1{background-color: red;}
    18.         .son2{background-color: green;}
    19.         .son3{background-color: blue;}
    20.     </style>
    21. </head>
    22. <body>
    23.     <div class="parent">
    24.         <!-- div.son.son1+div.son.son2+div.son.son3 -->
    25.         <div class="son son1">盒子1</div>
    26.         <div class="son son2">盒子2</div>
    27.         <div class="son son3">盒子3</div>
    28.     </div>
    29.     </body>

    效果预览图

     

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

    借助display进行转换。

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

    “block”是“块”的意思。

    将行元素 转成 块元素

    1. <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 700px;
    8.             overflow: hidden;
    9.             outline: 1px solid red;
    10.         }
    11.         .son{
    12.             width: 200px;
    13.             height: 200px;
    14.             /* 将行元素 转成 块元素 */
    15.              display: block;
    16.         }
    17.         .son1{
    18.             background-color: pink;
    19.         }
    20.         .son2{
    21.             background-color: yellowgreen;
    22.         }
    23.         .son3{
    24.             background-color: skyblue;
    25.         }
    26.     </style>
    27. </head>
    28. <body>
    29.     <div class="parent">
    30.         <span class="son son1">盒子1</span>
    31.         <span class="son son2">盒子2</span>
    32.         <span class="son son3">盒子3</span>
    33.     </div>
    34. </body>

    效果预览图

     

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

    1.     <style>
    2.         *{
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         .parent{
    7.             width: 700px;
    8.             overflow: hidden;
    9.             outline: 1px solid red;
    10.         }
    11.         .son{
    12.             width: 200px;
    13.             height: 200px;
    14.             /* 将行元素 转成 块元素 */
    15.              display: block;
    16.         }
    17.         .son1{
    18.             background-color: pink;
    19.         }
    20.         .son2{
    21.             background-color: yellowgreen;
    22.         }
    23.         .son3{
    24.             background-color: skyblue;
    25.         }
    26.     </style>
    27. </head>
    28. <body>
    29.     <div class="parent">
    30.         <span class="son son1">盒子1</span>
    31.         <span class="son son2">盒子2</span>
    32.         <span class="son son3">盒子3</span>
    33.     </div>
    34. </body>

    效果预览图

     

  • 相关阅读:
    嵌入式系统中偶发性问题
    学习鸿蒙基础（12）
    10周慕课+期中模拟测试
    Java排序算法(三)：插入排序
    使用Vue+CSS实现汉堡图标过渡为叉号图标，有点意思
    计算机毕业设计选题推荐-体育赛事微信小程序/安卓APP-项目实战
    2. Vue3 Composition API
    Spring入门第一讲——Spring框架的快速入门
    golang-gin框架使用1
    uni-app_01
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/125632385