CSS元素显示模式

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如< div >自己占一行，一行可以放多个< span >

HTML元素一般分为块元素（自己独占一行）和行内元素（一行可以放好多个）

1.块元素

常见的块元素有：

~

、

、

、
    、
      、
    1. 等，其中**
      标签是最典型的块标签**

特点：

  1. 自己独占一行
  2. 高度，宽度，内外边距可控制
  3. 宽度默认是容器（父级宽度）的100%
  4. 是一个容器及盒子，里面可以放行内或块级元素

🔺注意：

  • 文字类的元素不能使用块级元素
  • < p>标签主要用于存放文字，因此< p>里面不能放块级元素，特别是不能放< div>
  • < h1>~< h6>都是文字类块级标签，里面也不能放其他块级元素

2.行内元素

常见的行内元素有、、、、、、、、、等，其中**标签是最典型的行内元素**，也称为内联元素。

特点：

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 高、宽直接设置是无效的
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素

🔺注意：

3.行内块元素

在行内元素中有几个特殊的标签——、、，他们同时具有块元素和行内元素的特点，称为行内块元素。

特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
  2. 默认宽度就是它本身内容的宽度（行内元素特点）
  3. 高度、行高、内外边距都可以控制（块级元素特点）

总结：

image-20221113175908488

元素显示模式转换

一个模式的元素需要另外一种模式的特性，比如想要增加链接的触发范围

🔹转换为块元素：display（显示）：block（块级）； ※
1
2
3
4
5
6
7
8
9
10
11
/把行内元素a链接 转换成块级元素（可在内设置宽高数值）/
<style>
    a{
        width:300px;
        height:100px;
        display:block;
    }
</style>
<body>
    <a href="#">元素转换</a>
</body>
🔹转换为行内元素：display：inline；
1
2
3
4
5
6
7
8
9
/把div块级元素 转换成行内元素（宽度高度在内设置无效）/
<style>
    div{
        display:inline;
    }
</style>
<body>
   <div>块级元素</div>
</body>
🔹转换为行内块：display：inline-block；※
1
2
3
4
5
6
7
8
9
10
11
12
/把行内元素span 转换为行内块元素（一行可以放多个且可设置宽高数值）/
<style>
    span{
         width:300px;
         height:100px;
         display:inline-block;
    }
</style>
<body>
   <span>行内元素</span>
   <span>行内元素</span>
</body>
CSS
#CSS
CSS元素显示模式
http://example.com/2023/04/17/CSS的元素显示模式/
作者
花怜
发布于
2023年4月17日
许可协议