关于前端的一些学习记录（10）

本文链接：https://blog.csdn.net/m0_61529679/article/details/123784798

继上次背景颜色相关属性后，继续介绍元素显示模式...

引入：那些<div>、<p> 既是标签也是元素，只是拥有不同的显示模式。

元素的显示模式：三种常见的为：块级元素、行内元素、行内块元素...

1.块级元素

显示特点：独占一行；可以设置宽高；宽度默认为父元素的宽度，高度由内容撑开。

例：div标签、p标签、h标签、ul、li、dl、dt、dd、form、header、nav、footer...

2.行内元素

显示特点：一行可以显示多个（堆叠）；不可以设置宽高；宽度和高度默认由内容撑开。

例：a标签、spar标签、b、u、i、s、strong、ins、em、del...

3.行内块元素

显示特点：一行可以显示多个；可以设置宽高；

例：input标签、textarea标签、button、select...特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示的结果是inline。

4.元素显示模式的转换

目的：改变元素默认的显示特点，让元素符合局部要求；

语法：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        color: pink;
        background-color: green;
        width: 300px;
        height: 300px;

        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>the first block</div>
    <div>the second block</div>
  </body>
</html>

上述代码演示效果：