CSS元素显示模式的存在(块级元素，行内元素，行内块元素）

CSS元素显示模式

• • 元素显示模式的存在
  • block 块级元素
  • inline 行内元素
  • inline-block 行内块元素

 

元素显示模式的存在

HTML中有各种各样的标签，如 < img/> < h1>~< h6>,< span>及
< div>等等。这些标签代表不同的HTML元素，有各自的含义和特定使用环境。同时，这些标签在其“本质”上就有着不同的分类。即元素可被分作 block(块级元素），inline(行内元素或内联元素）和inline-block(行内块元素）

block 块级元素

首先，了解block元素，需要知道常见的block块级元素有哪些：
< h1>~< h6>，< p>,< ul>，< li>, < ol>,和< div>标签。
最常见的是 < div>标签，也是写代码中经常用到的。
再者，需要了解block元素的特点：

1. 独占一行，排斥其它元素与其在同一行
2. 可以定义宽度width,高度height，但默认宽度就是100%
3. 可以定义四个方向上的margin及padding
4. 内部可容纳其它块元素或行内元素

关于独占一行，有以下简单demo来体现：

    <div class="div1">aaaa</div><div class="div2">bbbb</div>

.div1{
    background-color: red;
}
.div2{
    background-color: yellow;
}

将两个div标签即块级元素写在同一行，并设置一定的背景颜色。
最终结果

可见两个块级元素并没有办法在同一行，都是各占一行
可以尝试换成别的元素，也会发现，块级元素都会排斥其它元素与其在同一行，是独占一行的。‘
这是块级元素的第一个特点：独占一行

由上我们也可发现，若不指定width宽度，那么块级元素的宽度属性是100%（与浏览器同宽）。即默认宽度为100%。我们可以设置对其设置宽度，高度。如将CSS代码修改成：

    .div1{
        background-color: red;
        width: 100px;
        height: 100px;
    }
    .div2{
        background-color: yellow;
    }

效果：

可见，块级元素block的第二个特点：可以设置宽度和高度，并且默认宽度为100%。

关于四个方向的margin和padding值设置：
我们从以上代码继续添加属性如：

    .div1{
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 50px 50px 50px 50px;
    }
    .div2{
        background-color: yellow;
    }

效果

设置padding也是一样的，四个方向都可以设置
即块级元素的第三个特点，不仅可以设置宽度和高度，还可以设置四个方向上的margin和padding值。

关于第四点，内部可容纳其它块元素和行内元素，修改一下html

    <div class="div1">aaaa
        <div class="inside">ccc</div>
    </div>  
    <div class="div2">bbbb</div>

    .div1{
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 50px 50px 50px 50px;
    }
    .div2{
        background-color: yellow;
    }
    .inside{
        background-color: green;
        width: 30px;
        height: 30px;
    }

效果

也可以尝试在块级元素中插入行内元素。最后一个特点：块级元素内可以容纳其它块级元素或行内元素

inline 行内元素

按照同样的思路，了解学习行内元素，也是先了解行内元素有什么，再了解其特点。
首先，常见的inline元素有，< a> ，< strong> ，
< b>，< em>，< i>，< del>，< s>，< ins>，< u>，< span>。
其中a标签是超链接标签，span标签是最典型常见的行内元素。
再者，inline行内元素的特点有：

1. 可以与其它相邻行内元素在同一行
2. 无法定义width，height，默认宽度为content内容本身宽度
3. 只有margin-left,margin-right,padding-left,padding-right有效
4. 行内元素内只能容纳文本或其它行内元素

关于第一点，可以与其它行内元素在第一行，可看

    <span class='span1'>aaaa</span><span class='span2'>bbbb</span>

.span1{
    background-color: pink;
}
.span2{
    background-color:green;
}

可以看到，一行确实可容纳多个行内元素，不独占一行。并且，默认宽度确实是content内容本身宽度。
对于宽度和高度的设置：

.span1{
    background-color: pink;
    width: 100px;
    height: 100px;  
}
.span2{
    background-color:green;
}

添加了宽度和高度属性

发现并没有像块级元素一样可以设置宽度和高度，即行内元素设置宽度高度是无效的

关于margin值和padding值的设置，只有设置left和right是有效的，top和button是无效的。
可以从以下片段看出:

    <span class='span1'>aaaa</span><span class='span2'>bbbb</span>

.span1{
    background-color: pink;
    margin-top: 50px;
    margin-left: 50px;
}
.span2{
    background-color:green;
}

为第一个span元素添加了margin-top和margin-left，效果如下图：

margin-top并没有出效果，但margin-left有效果，同理，margin-button也没有效果，margin-right有效果。
padding值也是一样的特点，只是展示效果会略有不同，这是由于padding和margin属性内涵的区别导致。详情可看关于盒子模型属性的详细介绍。
第四点，行内元素内可容纳其它文本内容和行内元素，可自行佐证测试。

inline-block 行内块元素

行内块元素有 < img/> < input/> < td> 。
行内块元素的特点：

1. 可与相邻多个行内元素/行内块元素，在同一行 （行内元素的特点）
2. 可以设置宽度和高度，但默认宽度为content内容本身
3. 可以设置四个方向的margin,padding

    <span class='span1'>aaaa</span><span class='span2'>bbbb</span>

.span1{
    display:inline-block;
    background-color: pink;
}
.span2{
    display:inline-block;
    background-color:green;
}

可以加 display: inline-block，将元素转化为行内块元素。

可见，行内块元素，一行能同时占有多个，不独占一行 并且默认宽度为内容本身

稍作修改，添加宽度高度和margin

.span1{
    display:inline-block;
    background-color: pink;
    width: 100px;
    height: 100px;
    margin: 100px;
}
.span2{
    display:inline-block;
    background-color:green;
}

可见，可以设置margin，也可以设置宽度高度，同样也可设置padding。