前端基础(十)_标签分类（行级标签、块级标签、行块标签）

六卿

已于 2023-03-07 17:54:41 修改

阅读量1.3k

点赞数 1

分类专栏： # 前端基础（html、css）文章标签： css 行级标签块级标签行快标签

于 2022-12-16 18:00:00 首次发布

本文链接：https://blog.csdn.net/qq_43291759/article/details/128339870

版权

前端基础（html、css）专栏收录该内容

16 篇文章 4 订阅

订阅专栏

标签分类

可以分为三类：行级标签、块级标签、行块标签

行级元素

常用的行级元素：span、b、i、em、strong、a、del、sub、sup等

注意：

1、默认宽度随元素的内容的变化而变化；
2、默认情况下高度由内容撑开；
3、不会独立成行，相邻的行内元素会排列一同一行当中，直到一行排不下，才会换行；
4、换行和空格存在的情况下会被解析；
5、具有部分盒模型特征宽高无效 padding margin 只显示左右边框保留；
6、使用：一般用来容纳文本和其他内联元素，通常行元素被包含在块元素中使用

例子：

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 100px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }
  </style>
</head>

<body>
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>

</html>

页面：
在这里插入图片描述

块级元素

常用的块级元素：h1~h6、p、div、ul、li、ol、dl 、dt、dd等

注意：

1、默认宽度撑满父元素的宽度；
2、默认高度由内容撑开；
3、元素垂直布局；
4、具有全部的盒模型特征；
5、使用：块级元素中可以添加块级元素、行级元素、行块元素

例子：

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 100px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <!-- <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div> -->

  <!-- 块状元素 -->
  <div>div标签</div>
  <p>p标签</p>
  <h1>h1标签</h1>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
  </ul>
</body>

</html>

页面：
在这里插入图片描述

行块元素

常用的行块元素：img、input等

注意：

1、具有块级标记特征：可以设置宽高内填充外边距；
2、具有行级标记的特征：默认横向显示，直到一行拍不下才会换行，空格会被解析

例子：

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 500px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <!-- <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div> -->

  <!-- 块状元素 -->
  <!-- <div>div标签</div>
  <p>p标签</p>
  <h1>h1标签</h1>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
  </ul> -->

  <!-- 行块元素 -->
  <div class="div2">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
  </div>

</body>
</html>

页面：
在这里插入图片描述
第一行放不下的时候，自动换行展示

类型转换–display属性

display:none； 元素不会被显示—隐藏元素；不占位
display:block; 元素的显示，将元素显示为块级元素，具有块级元素的特征
display:inline; 将元素显示为行级元素，具有行级元素的特征
display:inline-block; 将元素显示为行块元素，具有行块元素的特征

**1、display:block例子：**

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 200px;
      border: 2px solid red;
      font-size: 15px;
      color: red;
    }

    /* a,
    span,
    b,
    i,
    em,
    strong {
      display: block;
    } */
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>


</html>

页面：
在这里插入图片描述
加上display:block：

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 200px;
      border: 2px solid red;
      font-size: 15px;
      color: red;
    }

    a,
    span,
    b,
    i,
    em,
    strong {
      display: block;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>
</html>

页面：
在这里插入图片描述

2、display:inline例子：
根据css的特性，优先继承最近属性，我们可以使用上面的例子，后面再加上属性display:inline即可

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 200px;
      border: 2px solid red;
      font-size: 15px;
      color: red;
    }

    a,
    span,
    b,
    i,
    em,
    strong {
      display: block;
    }

    a,
    span,
    b,
    i,
    em,
    strong {
      display: inline;
    }
  </style>
</head>

<body>
  <!-- 行内元素 -->
  <div class="div2">
    <a href="#">a标签</a>
    <span>span标签</span>
    <b>b标签</b>
    <i>i标签</i>
    <em>em标签</em>
    <strong>strong标签</strong>
  </div>
</body>


</html>

页面：
在这里插入图片描述
3、display:inline-block

<!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>我的第一个页面</title>
  <style>
    .div2 {
      width: 300px;
      border: 2px solid red;
      font-size: 26px;
      color: red;
    }

    .div2>div,
    .div2>p,
    .div2>h1,
    .div2>ul,
    .div2>ul>li {
      display: inline-block;
    }
  </style>
</head>

<body>

  <!-- 块状元素 -->
  <div class="div2">
    <div>div标签</div>
    <p>p标签</p>
    <h1>h1标签</h1>
    <ul>
      <li>li 1</li>
      <li>li 2</li>
    </ul>
  </div>
</body>

</html>