标签显示模式

我们把标签分为三类，一类为块级(block)标签，一类为行内(inline)标签,最后一类为二者的综合，为行内块(inline-block)标签。

每个块标签通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块级标签包括

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内标签（内联标签）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内标签包括

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

假设我们对行内标签设置其宽高属性

a {
    width: 20px;
    height: 30px;
}

这样做是没有效果的。链接a的宽高属性不会改变。

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块标签。

那么标签的这种显示模式可不可以转换呢？答案是可以，我们可以使用display属性对其进行转换，如

display: inline;       /*将块级标签转换为行内标签*/
display: block;        /*将行内标签转换为块级标签*/
display: inline-block; /*将块级标签或者行内标签转换为行内块标签*/

我们来看一个例子，假设有下面的程序

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标签显示模式</title>
        <style>
            a {
                text-decoration: none;  /*取消下划线*/
                background: pink;       /*设置背景颜色，用以观察该标签显示模式的转换*/
            }
        </style>
    </head>
    <body>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </body>
</html>

因为标签a是行内标签，所以这三个标签是显示在一行内的，如下:

并且无法对其设置宽高以及对齐属性。现在我们将标签a的显示模式改为块级模式

a {
    text-decoration: none;
    background: pink;
    display: block;
}

效果为

可见链接已经变为了块级标签，一个标签占据一整行，并且我们可以对其设置宽高属性以及对其方式，如下

a {
    text-decoration: none;
    background: pink;
    display: block;
    width: 400px;
    height: 100px;
    text-align: center;
}

效果为

可见链接a的宽高发生了变化，并且其内的文字水平居中对齐了。

我们可以把所有的标签看做是一个盒子，有的盒子是占据一行的，并且可以设置其大小，有的盒子只能在行内，并且不能设置其大小，还有的盒子虽然在行内，但是可以设置其大小。我们就用CSS对盒子进行操作，或摆放，或修饰，或改变盒子的显示模式等等。

标签显示模式

标签显示模式

猜你喜欢