• 元素转换（四种）

    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>

    效果预览图

     

  • 相关阅读:
    ChatGLM2_6b安装
    rpmbuild 包名 version 操作系统信息部分来源 /etc/rpm/macros.dist
    工具类Utils
    24-如何使用Spark实现TopN的获取（描述思路或使用伪代码）（重点）
    最全的各版本PostGis下载
    Spring面试题大全含答案共79题，最新全spring全家桶超级葵花宝典
    被阿里、腾讯、华为追捧为最牛逼的 Java 框架你知道是什么吗？
    c_结构体
    [COCI2021-2022#1] Logičari
    【深度学习实验】数据可视化
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/125632385