css块级标签，行内标签，行内块标签的转换（2）-css教程-PHP中文网

首页

web前端

css教程

css块级标签，行内标签，行内块标签的转换（2）

高洛峰

Feb 22, 2017 pm 01:34 PM

HTML标签的分类

在讲标签分类的时候，我们作为初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！

首先我们可以按照显示的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。

块级标签

特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

典型的块级标签有：e388a4556c0f65e1904146cc1a846bee ，h系列，25edfb22a4f469ecb59f1190150159c6，73de882deff7a050a357292d0a1fca94，67bc4f89d416b0b8236eaa5f43dee742，e388a4556c0f65e1904146cc1a846bee ，ff9c23ada1bcecdd1a0fb5d5a0f18437，ff6d136ddc5fdfeffaf53ff6ee95f185

行内标签

特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

典型的行内标签有：45a2772a6b6107b401db3c9b82c049c2，3499910bf9dac5ae3c52d5ede7383485，a4b561c25d9afb9ac8dc4d70affff419，5a8028ccc7a7e27417bff9f05adf5932，88f336217b3880082bb52d49b5de60a5，907fae80ddef53131f3292ee4f81644b，8e99a69fbe029cd4e2b854e244eab143，2e1cf0710519d5598b1f0f14c36ba674，0c6dc11e160d3b678d68754cc175188a

行内块标签：

特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

典型的行内标签有：a1f02c36ba31691bcfe87b2722de723b，d5fd7aea971a85678ba271703566ebfd

那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。

下面请看如下示例：

1：将行内标签转换为块级标签

<!DOCTYPE html>
<html>
    <head>
        <title>行内标签转块级标签</title>
        <style type="text/css">
            a{
                width: 200px;
                height: 200px;
                background-color: red;
                display: block; 
            }
        </style>
    </head>
    <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
        <a href="https://www.baidu.com">百度</a>
    </body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>

运行结果如下;点红色任意一区域都能实现跳转到百度，所以他可以实现扩大链接范围。

css块级标签，行内标签，行内块标签的转换（2）

2：将行内标签转换为行内块标签

上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后

它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            p{
            width:100px;
            height:100px;
           background-color: red;
           margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
           }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
        <a href="https://www.baidu.com">百度一下</a>
        <p>我是p1</p>   <!--这个是一般的块级标签，会上下分行-->
        <p>我是p2</p>
    </body>
</html>

运行结果：

css块级标签，行内标签，行内块标签的转换（2）

3.将块级标签转换为行内标签

 1 76c82f278ac045591c9159d381de2c57 2 100db36a723c770d327fc0aef2ce13b1 3     93f0f5c25f18dab9d176bd4f6de5d30e 4         b2386ffb911b14667cb8f0f91ea547a7块级标签转行内标签6e916e0f7d1e588d4f442bf645aedb2f 5         46d5fe1c7617e3914f214aaf043f4ccf 6             p{ 7                 width: 100px; 8                 height: 100px; 9                 background-color: red;10                 display: inline;11             }12         531ac245ce3e4fe3d50054a55f26592713     9c3bca370b5104690d9ef395f2c5f8d114     6c04bd5ca3fcae76e30b72ad730ca86d15          e388a4556c0f65e1904146cc1a846bee谷歌94b3e26ee717c64999d7867364b1b4a3  ec54d1ff7266d39d0678030f37912ca016          e388a4556c0f65e1904146cc1a846beehttp://www.php.cn94b3e26ee717c64999d7867364b1b4a317     36cc49f0c466276486e50c850b7e495618 73a6ac4ed44ffec12cee46588e518a5e

效果如下：

css块级标签，行内标签，行内块标签的转换（2）