• 三、CSS基础-元素显示模式 行元素，块元素，行内块元素

    三、CSS基础-元素显示模式

    目标：能够认识三种常见的 元素显示模式****，并通过代码实现不同 元素显示模式 的转换

    1. 1. 块级元素
    2. 2. 行内元素
    3. 3. 行内块元素
    4. 4. 元素显示模式转换

    1.1 块级元素

    小结
    1. ➢ 块级元素的显示特点有哪些？
    2. 	1. 独占一行(一行只能显示一个)
    3. 	2. 宽度默认是父元素的宽度，高度默认由内容撑开
    4. 	3. 可以设置宽高
    5. ➢ 块级元素的代表标签有哪些？
    6. 	• div、p、h系列
    测试代码：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
    10.         .t1 {
    11.             width: 150px;
    12.             height: 150px;
    13.             background-color: pink;
    14.  
    15.             /* 行内块 */
    16.             /* display: inline-block; */
    17.  
    18.             /* 行内 */
    19.             /* display: inline; */
    20.             display: block;
    21.         }
    22.         .t2 {
    23.             width: 300px;
    24.             height: 300px;
    25.             background-color: pink;
    26.  
    27.             /* 行内块 */
    28.             /* display: inline-block; */
    29.  
    30.             /* 行内 */
    31.             /* display: inline; */
    32.             /* display: block; */
    33.         }
    34.     style>
    35. head>
    36. <body>
    37.     <div class="t1">11111div>
    38.     <div class="t1">11111div>
    39.  
    40.     <div class="t2">11111div>
    41.     <div class="t2">11111div>
    42. body>
    43. html>
    测试结果：

    2.1 行内元素

    小结
    1. ➢ 行内元素的显示特点有哪些？
    2. 	1. 一行可以显示多个
    3. 	2. 宽度和高度默认由内容撑开
    4. 	3. 不可以设置宽高
    5. ➢ 行内元素的代表标签有哪些？
    6. 	• a、span
    测试代码：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
    10.         span {
    11.             width: 300px;
    12.             height: 300px;
    13.             background-color: pink;
    14.  
    15.             /* 行内块 */
    16.             /* display: inline-block; */
    17.  
    18.             /* 块 */
    19.             /* display: block; */
    20.             display: inline;
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <span>spanspan>
    26.     <span>spanspan>
    27. body>
    28. html>
    测试结果：

    3.1 行内块元素

    小结:
    1. ➢ 行内块元素的显示特点有哪些？
    2. 	1. 一行可以显示多个
    3. 	2. 可以设置宽高
    4. ➢ 行内块元素的代表标签有哪些？
    5. 	• input、textarea
    测试代码：
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* 行内块: 一行显示多个; 加宽高生效 */
    10.         img {
    11.             width: 100px;
    12.             height: 100px;
    13.         }
    14.         p {
    15.             width: 200px;
    16.             height: 200px;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <img src="./images/1.jpg" alt="">
    22.     <img src="./images/1.jpg" alt="">
    23.     <span>测试一下span>
    24. body>
    25. html>
    测试结果：

    4.1 元素显示模式转换重要

  • 相关阅读:
    python多任务、面向对象、命令行启动动态绑定端口号静态web服务器代码实现
    MyBatisPlus入门
    周志华《机器学习》第三章课后习题
    【LeetCode热题100】打卡第14天：下一个排列&最长有效括号
    DreamScene2 免费WIndows 动态桌面壁纸播放软件启动无响应失败问题解决及安装使用帮助
    MySQL常用语句整理
    职责链模式，非常容易被忽视的设计模式之一（设计模式与开发实践 P13）
    MyBatis-Plus中的更新操作（通过id更新和条件更新）
    k8s学习-CKA真题-集群故障排查kubelet
    【论文笔记 | 异步联邦】 FedBuff
  • 原文地址：https://blog.csdn.net/weixin_48370579/article/details/128178635