【web前端开发】CSS的元素显示模式

ゞ浴缸里的玫瑰 2023-09-27 13:09 120阅读 0赞

## 前言 ##

元素的显示模式可以更好的帮助我们布局页面,了解元素的显示模式,可以让我们布局页面时更加简单清晰

## 什么是元素显示模式 ##

元素显示模式就是**元素(标签)以什么样的方式进行显示**  
HTML元素一般分为块元素和行内元素两种类型  
以下是块级元素和行内元素在网页中的显示:  
![在这里插入图片描述][ad68ef4c3505497ea194a44cf72279b8.png]

## 块元素 ##

常见的块级元素有`<h1>~<h6> <p> <div> <ul> <ol> <li>等`  
`最典型的就是<div>标签`

<!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 {
                width: 100px;
                height: 200px;
            } */
        </style>
    </head>
    
    <body>
        <div>块级元素独占一行</div>
        <div>第二个块元素</div>
        <div>第三个块元素</div>
    </body>
    </html>

![在这里插入图片描述][3a70287f6e8c46e7a6ca494813be329d.png]  
这是没有设置宽度和高度的效果图  
把注释去掉的效果如下:  
![在这里插入图片描述][7d2aa25f249848e1af2bd676fe6baf1d.png]  
可以给块元素设置高度和宽度  
⭐**块级元素有4个特点**:

1.  块级元素**独占一行**
2.  高度 宽度 外边距和内边都**可以设置**
3.  宽度默认是容器的宽度
4.  是一个容器及盒子,里面可以放行内或块级元素

❗注意:

*  `文字类的元素内不能使用块级元素`
 *  `<p>标签主要用于存放文字,因此<p>标签里面不能放块级元素,尤其是<div>元素`
 *  `同理:<h1>~<h6>等都是放文字的,因此也不能放块级元素`

## 行内元素(内联元素) ##

常见的行内元素有`<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>`等  
其中`<span>是最典型的行内元素`

<!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>
            /* span {
                height: 100px;
                width: 100px;
            } */
        </style>
    </head>
    
    <body>
        <span>行内元素1</span>
        <span>行内元素2</span>
        <span>行内元素3</span>
    </body>
    
    </html>

![在这里插入图片描述][8a6b157be4d34c448fbfc983e79957ee.png]  
这也是没有给行内元素设置高度和宽度的效果  
把注释去掉效果如下:  
![在这里插入图片描述][3aa74fecff55400b9b503a53d1982634.png]  
去掉注释效果也是这样,给行内块元素设置高度和宽度是没有效果的  
⭐**行内元素也有4个特点**:

1.  相邻行内元素在 同一行,一行可以显示多个
2.  高和宽直接设置是无效的
3.  默认宽度就是容器的宽度
4.  行内元素只能放文本或者其它行内元素

❗注意:

*  `链接里面不能再放链接(a标签里面不能再放a标签)`
 *  `特殊情况<a>标签里面可以放块级元素,但<a>转换为下一级模式最安全`

## 行内块元素 ##

在行内元素中,有一些特殊标签,`<img /> <input /> <td>`,它们同时具有块级元素和行内元素的特点,因此称它们为行内块元素

⭐**行内块元素的特点**:

1.  和相同行内元素(行内块)在同一行上,但是它们之间有空白缝隙,一行可以显示多个(行内元素的特点)
2.  默认宽度是容器的宽度(行内元素的特点)
3.  高度 行高 外边距 及 内边距 都可以设置(块级元素特点)

## 元素显示模式总结 ##

<table> 
 <thead> 
  <tr> 
   <th>元素模式</th> 
   <th>元素排列</th> 
   <th>设置样式</th> 
   <th>默认宽度</th> 
   <th>包含</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>块级元素</td> 
   <td>一行只能放一个块级元素</td> 
   <td>可以设置高度和宽度</td> 
   <td>容器的宽度</td> 
   <td>容器级可以包含任何标签</td> 
  </tr> 
  <tr> 
   <td>行内元素</td> 
   <td>一行可以放多个行内元素</td> 
   <td>不可以直接设置宽和高</td> 
   <td>本身内容的宽度</td> 
   <td>容纳文本或其它行内元素</td> 
  </tr> 
  <tr> 
   <td>行内块元素</td> 
   <td>一行可以放多个行内块元素</td> 
   <td>可以设置宽和高</td> 
   <td>本身内容的宽度</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 元素模式的转换 ##

元素模式的转换就是一种模式的元素需要另外一种元素的特性  
例如:给链接标签增加点击范围  
`转化为块级元素: display: block`  
`转化为行内元素: display: inline`  
`转化为行内块元素: display: inline-block`  
元素模式的转换在平时用的还是非常多的,大家务必要记住

以上就是CSS元素显示的内容了

![在这里插入图片描述][627369daabcb4b1b991bdbd9bd448157.png_pic_center]

[ad68ef4c3505497ea194a44cf72279b8.png]: https://img-blog.csdnimg.cn/ad68ef4c3505497ea194a44cf72279b8.png
[3a70287f6e8c46e7a6ca494813be329d.png]: https://img-blog.csdnimg.cn/3a70287f6e8c46e7a6ca494813be329d.png
[7d2aa25f249848e1af2bd676fe6baf1d.png]: https://img-blog.csdnimg.cn/7d2aa25f249848e1af2bd676fe6baf1d.png
[8a6b157be4d34c448fbfc983e79957ee.png]: https://img-blog.csdnimg.cn/8a6b157be4d34c448fbfc983e79957ee.png
[3aa74fecff55400b9b503a53d1982634.png]: https://img-blog.csdnimg.cn/3aa74fecff55400b9b503a53d1982634.png
[627369daabcb4b1b991bdbd9bd448157.png_pic_center]: https://img-blog.csdnimg.cn/627369daabcb4b1b991bdbd9bd448157.png#pic_center