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

css块级标签，行内标签，行内块标签的转换

高洛峰

发布： 2017-02-20 13:38:38

原创

2190 人浏览过

css块级标签，行内标签，行内块标签的转换

在基础1中，我详细讲了css的常见属性，几种不同的选择器，在此基础之上我们来进一步地认识它们的特性从而更好地学习和掌握相关开发技能。

HTML标签的分类

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

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

块级标签

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

典型的块级标签有：

，h系列，

，

行内标签

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

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

行内块标签：

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

典型的行内标签有：，

那么有的同学就会想了，难道我就不可以控制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 href="https://www.baidu.com">百度</a> </body>  </html>
登录后复制
运行结果如下;点红色任意一区域都能实现跳转到百度，所以他可以实现扩大链接范围。
2：将行内标签转换为行内块标签
上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后
它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。
<html> <head> <title>块级和行内块级</title> <style type="text/css"> a{ width: 100px; height: 100px; background-color: green; display: inline-block; } div{ width:100px; height:100px; background-color: red; margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/ } </style> </head> <body> <a href="https://www.baidu.com">百度</a>  <a href="https://www.baidu.com">百度一下</a> <div>我是div1</div>  <div>我是div2</div> </body> </html>
登录后复制
运行结果：

3.将块级标签转换为行内标签
<!DOCTYPE html> <html> <head> <title>块级标签转行内标签</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; display: inline; } </style> </head> <body> <div>谷歌</div>  <div>https://www.google.com</div> </body> </html>
登录后复制
效果如下：

有关块级标签，行内标签，行内块级标签我就先写到这里，也欢迎大家看了之后能够多指点，感谢。

更多css块级标签，行内标签，行内块标签的转换相关文章请关注PHP中文网！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

css块级标签，行内标签，行内块标签的转换

HTML标签的分类