区块、内联和内联块的区别和转换

在css盒模型中的盒类型主要有“块级元素”、“行内元素”和“行内-块级元素”，分别简称为“区块”、“内联”和“内联块”，顾名思义这三种盒类型之间有一定关系也有一定区别。

一、块级元素（区块)）

块级元素,就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p>等文档元素。

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
<style type="text/css">
    div {
        background: silver;
        width: 100px;
        height: 100px;
    }
</style>    
</head>

<body>
      <div>这是一个块级元素</div>
      这是一段文本
</body>

1.1块级元素

如上图会块级元素

div {
    background: silver;
    width: 200px;
    height: 200px;
    }

1.2块级元素

二、行内元素（内联）

所谓行内元素,不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。比如:<span>、 <b>文本元素。

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
<style type="text/css">
    span {
        background: silver;
        width: 100px;
        height: 100px;
    }
</style>    
</head>

<body>
    <span>这是一个行内元素</span>
    这是一段文本
</body>

2.1内联元素

span {
    background: silver;
    width: 150px;
    height: 150px;
    }

2.2内联元素

三、行内-块元素

行内-块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
<style type="text/css">
    img {
        width: 100px;
        height: 100px;
    }
</style>    
</head>

<body>
    ![](image.jpg)
    这是一段文本
</body>

3.1行内-块级元素

img {
    width: 150px;
    height: 150px;
}

3.2行内-块级元素

从以上“块级元素”、“行内元素”和“行内-块级元素”三个例子，我们可以看出主要区别在于“块级元素”可以设置尺寸，而且会隔离其他元素；而行内元素不能设置尺寸，而不会隔离其他元素；行内-块级元素可以设置尺寸单也不会隔离其他元素。

四、三种元素类型的转换

在开发中我们有事会遇到不同元素之间转换的需求，我们只需通过css中的display属性来实现,下面三个例子是三种类型的转换例子。

1.块级元素转换成内联元素（将图1.1中的块级效果转换成内联效果）

 div {
        background: silver;
        width: 100px;
        height: 100px;
        display: inline;
    }

1.1中块级元素转成行内元素

如上图转换成行内元素以后，两个元素就不在隔离，无法设置尺寸

2.将行内元素转成块级元素（2.1中的行内元素效果转换成块级元素）

span {
    background: silver;
    width: 200px;
    height: 200px;
    display: block;
}

2.1中行内元素转成块元素

如上图转换成块级元素以后，块级元素就会隔离后面的文本元素，可以设置尺寸
3.将行内元素和块级元素装换成行内块级元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
<style type="text/css">
    div, span{
        background: silver;
        width: 200px;
        height: 200px;
        display: inline-block;;;
    }
</style>
</head>

<body>
    <div>这是一个块级元素</div>
    <span>这是一个行内元素</span>
</body>

块级元素和行内元素同时转换成行内块元素

如上图行内元素和块级元素在设置成行内块元素后，就同时拥有块级元素和行内元素的特点即既可以设置元素尺寸又不会相互隔离。

区块、内联和内联块的区别和转换