HTML5基础——10、CSS元素显示模式

原创已于 2025-10-18 07:53:32 修改 · 1.3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #显示模式

于 2025-10-17 15:00:00 首次发布

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5，这次学习一下CSS元素的显示模式。

一、显示元素

显示元素一般分为3种类型

1、块元素

常见的块元素有:

<h1>~<h6>标题
<p>
<div>
<ul>
<ol>
<li>

例子：

<body>
  <h1>标题1</h1>
  <p>段落1</p>
  <div>div1</div>
  <ul>列表1
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <ol>列表2
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ol>
</body>

运行效果：
在这里插入图片描述

可以看出这些元素的最大特点是，它们都是自己独占一行的。
除了这个特点以外，还有别的一些特点，可以看看这个例子：
显示效果：
在这里插入图片描述

可以看出，div作为一个块元素，它的默认宽度，是整个屏幕，也就是它的父级，然后在div的内部，可以继续放置其他的元素。
假如给div加上宽度的值

div {
  background-color: red;
  border: 1px solid black;
  width: 200px;
}

会变成
在这里插入图片描述

总结一下块元素的特点：
1. 自己独占一行
2. 默认宽度是父级宽度100%
3. 宽高、边距可以指定
4. 里面可以继续放别的元素

2、行内元素

行内元素，顾名思义就是在一行里面可以存在多个的元素。
场景的行内元素有

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。

看看这个例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: red;
      border: 1px solid black;
    }

    span {
      background-color: blue;
      border: 1px solid black;
      width: 1000px;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>22</span>
    <span>333</span>
    <span>4444</span>
    <span>5555<span>xxxxx</span></span>
    <span>66666<div>7777</div></span>
    <span>888888</span>
    <span>9999999</span>
  </div>
</body>

显示效果：
在这里插入图片描述

从这个例子可以看出，我虽然给span指定了width宽度，但并没有生效，span的宽度还是以自己显示的内容为准的。
然后在span里面再放span，是允许的，它们还是会在同一行。但如果在span里面再放div，那么div还是会另起一行来显示，它不会包含在span里面
所以可以总结一下行内元素的特点：
1. 相邻的元素可以在一行里面显示多个
2. 设置宽高是无效的
3. 宽度是自己本身内容的宽度
4. 行内元素里面只能包含文本显示内容或者其他行内元素，不能包含块元素

3、行内块元素

有几种特殊的标签，它们同时具有块元素和行内元素的特点，这几个可以成为行内块元素，比如：

<img />、<input />、<td>

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <input type="text" value="123">
  <input type="text" value="123">
  <input type="text" value="123">
</body>

显示效果：
在这里插入图片描述

所以行内块元素的特点是：
1. 可以一行显示多个
2. 可以指定宽高和边距

二、元素显示模式的转换

在特殊的需求下，可以对元素的显示模型进行转换，使用display

1、转为块元素：

display:block

举例：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      background-color: red;
    }

    .box {
      background-color: blue;
      display: block;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <span>123</span>
  <span>456</span>
  <span class="box">789</span>
  <span class="box">xxx</span>
</body>

显示：
在这里插入图片描述

虽然span是典型的行内元素，但由于给指定了class为box的2个加上了display: block;所以它直接就变成了块，它们变成了独占一行，然后可以指定宽高了。

2、转为行内元素：

display:inline

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: red;
      width: 100px;
      height: 100px;
    }

    .line {
      background-color: blue;
      display: inline;

    }
  </style>
</head>

<body>
  <div>123</div>
  <div>456</div>
  <div class="line">789</div>
  <div class="line">xxx</div>
</body>

显示：
在这里插入图片描述

和第一个例子想法，这次是把div指定了inline，所以它不再独占一行，也不再可以指定宽高了

3、转为行内块元素：

display:inline-block

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      background-color: red;
      width: 100px;
      height: 100px;
    }

    .line {
      background-color: blue;
      display: inline-block;
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div>123</div>
  <div>456</div>
  <div class="line">789</div>
  <div class="line">xxx</div>
</body>