• 元素转换（四种）

    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>

    效果预览图

     

  • 相关阅读:
    基于AlexNet卷积神经网络的手写体数字识别系统研究-附Matlab代码
    Redis高级数据类型-HyperLogLog&Bitmap以及使用两种数据类型完成网站数据统计
    猿创征文｜机器学习实战（8）——随机森林
    Linux安装tomcat9
    React - 路由跳转方法
    Python的configparser读写配置文件
    CaiT：Facebook提出高性能深度ViT结构 | ICCV 2021
    最近要考pmp，哪个培训机构比较好?
    想要进行期权模拟？这里是最佳选择！
    自动化测试框架pytest命令参数
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/125632385