【前端学习】CSS显示模式

溜溜球QWQ

于 2024-07-26 12:06:43 发布

阅读量240

点赞数 7

分类专栏：前端学习文章标签：前端学习 css

本文链接：https://blog.csdn.net/crashzzzllq/article/details/140712172

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS显示模式

块级元素

独占一行、宽度默认是父级100%、添加宽width高height属性会生效
例如：div

行内元素

一行可以共存多个、尺寸由内容撑开、如果加宽高不生效（注意只是宽高不生效，颜色是生效的）
例如：span

行内块元素

一行共存多个、默认尺寸由内容撑开、加宽高生效
例如：img

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>显示模式</title>
  <style>
    /* 显示模式：标签（元素）的显示方式
    div标签
    div标签

    span标签span标签 
    作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
    */

    /* 显示模式：
      块级元素 代表div
        独占一行、宽度默认是父级的100%、添加宽width高height属性生效
      
      行内元素 代表span
        一行可以共存多个，尺寸由内容撑开,如果加宽高不生效（注意只是宽高不生效，背景色是生效的）

      行内块元素 
        一行共存多个，默认尺寸由内容撑开，加宽高生效
      
      */
    div {
      width: 100px;
      height: 100px;
    }

    .div1 {
      background-color: aqua;
    }

    .div2 {
      background-color: violet;
    }

    .span1 {
      background-color: rgb(20, 20, 165);
    }

    .span2 {
      background-color: rgb(228, 80, 177);
    }

    img {
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <!-- 块元素 -->
  <div class="div1">div标签1</div>
  <div class="div2">div标签2</div>

  <!-- 行内元素 -->
  <span class="span1">span11111111</span>
  <span class="span2">span1</span>

  <!-- 行内块元素 -->
  <img src="../html_code/taylor02.jpg" alt="">
  <img src="../html_code/taylor02.jpg" alt="">
</body>

</html>