前言：

今天我们就学习CSS中的元素的类型，了解网页元素类型的相关性质，有助于我们去对网页进行排版处理。下面就一起去看看吧。

元素类型

常见元素类型有：块级元素、行内元素、行内块元素

1.块级元素

块级元素独占一行，不和其他元素并排；

可以设置宽高和上下外边距；

不设置宽度时默认宽度100%；

可以容纳其他块元素和内联元素（元素嵌套）；

常见的块级元素：div h1~h6 p ul ol li dl dt dd，以及后面会学习的table form等。

这里我就以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>
      .div1{
        height: 100px;
        background-color: red;
      }
      .div2{
        height: 100px;
        background-color: aquamarine;
      }
    </style>
</head>
<body>
  <div class="div1">
  </div>
  
  <div class="div2">
  </div>
  
</body>
</html>

效果如下：

这里我没有设置宽度为多少，此时div标签占用的宽度为父类元素宽度的百分百，也就是此时页面的整个宽度。可以看出块状元素是按照行为一整块进行占用的。如果没有去特别设置宽度的大小，结果会占用整个行宽度的百分百。

2. 行内元素

不霸占位置，可以和其他行内元素或文字内容并排；

不支持设置宽高，默认宽高为0，内容撑开宽高；

只能容纳文本和其他内联元素；

不能设置上下外边距；

常见的内联元素：a span b i strong em del等。

下面这里我就以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: 50px;
        width: 50px;
        color: red;
        padding: 2px;
        background-color: aqua;
      }
    </style>
</head>
<body>
  <div style="height: 50px;background-color: blueviolet;">
  </div>
    <span>
      darling in the franx
    </span> 
    <br> 
   <!--换行标签-->
    <span>
      亲爱的弗兰克斯
    </span>
   
    <div style="height: 50px;background-color:violet;">
    </div>
</body>
</html>

效果如下：

1686205157109

这里可以看出，我对span标签设置的宽度和高度，结果是没有生效的，所以行内元素是不支持宽高的设置的。同时行内元素是可以去通过padding的值来调整元素的占距，那这里就会出现一个问题了，如果没有设置好的话就会覆盖到其他的元素，所以要想好了再去使用。

3. 行内块元素

特点：

可以通过 display 属性对元素进行类型转换：

display:none; /* 元素不显示 */

display:block; /* 元素以块级形式展示 */

display:inline; /* 元素以行内形式展示 */

display:inline-block; /* 元素以行内形式排列，以块级形式展示 */

inline-block（行内块元素）的特点：

块级元素转换后宽高默认为0，且能够水平排放

行内元素转换后支持宽高和上下margin

行内块元素和行内元素或者文字之前的空格和换行会被解析成一个空格字符（通过设置父级字体大小解决，或者直接删除代码中的间隙内容）

不支持margin的auto属性

margin：auto只对有流体特性的元素生效。

流体特性：元素可以自适应它所处包含块的尺寸。比如常见的块级元素，默认是占满整个包含块的水平宽度。除此之外，绝对定位元素如果在对立方向设置了相同数值，也会产生流体特性。

inline-block：没有流体性，因为元素会改为收缩性（shrink），收缩到他可以收缩的最小宽度。

IE6 7不支持

另外，img input 等元素属于inline元素，但是拥有inlin-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>Document</title>
    <style>
      span{
        height: 50px;
        width: 50px;
        color: red;
        padding: 2px;
        background-color: aqua;
      }
    </style>
</head>
<body>
  <div style="height: 100px;background-color: blueviolet;"></div>
    <span>
      darling in the franx
    </span> 
    <!-- 换行标签 -->
    <br>
    <span>
      亲爱的弗兰克斯
    </span>
    <div style="display: inline-block;background-color:red;height: 50px;margin: 40px;">002</div>
</body>
</html>

效果：