0

0

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

高洛峰

高洛峰

发布时间:2017-02-20 13:38:38

|

2485人浏览过

|

来源于php中文网

原创

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

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

HTML标签的分类

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

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

块级标签 

立即学习前端免费学习笔记(深入)”;

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

典型的块级标签有:

 ,h系列,

  •  ,

      行内标签 

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

      典型的行内标签有:

      行内块标签 :

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

      典型的行内标签有:css块级标签,行内标签,行内块标签的转换

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

       

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

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

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

      rpcms轻量开源内容管理系统3.3.3
      rpcms轻量开源内容管理系统3.3.3

      RPCMS是一款基于PHP+MYSQL的轻量型内容管理/博客系统,支持PHP5.6版本以上,支持win/Linux系统。它自主研发的RP框架(OPP方式),采用MVC架构搭建的高效、稳定的内容管理系统。灵活小巧,但有着强大的扩展性、丰富的插件接口和大量的模板。统一采用模板标签,轻松上手,让开发更方便!智能缓存机制让网站运行方面大幅度提高。系统特点:源码简洁、体积轻巧、功能丰富、安全、灵活等特点,完

      下载

       

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

      下面请看如下示例:

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

      
      
          
              行内标签转块级标签
              
          
            
              百度
           
      

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

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

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

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

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

      
          
              块级和行内块级
              
          
          
              百度   
              百度一下
              
      我是div1
      我是div2

      运行结果:

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

       

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

      
      
          
              块级标签转行内标签
              
          
          
               
      谷歌
      https://www.google.com

      效果如下:

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

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

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

       

  • 相关专题

    更多
    C++ 高级模板编程与元编程
    C++ 高级模板编程与元编程

    本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

    10

    2026.01.23

    php远程文件教程合集
    php远程文件教程合集

    本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

    28

    2026.01.22

    PHP后端开发相关内容汇总
    PHP后端开发相关内容汇总

    本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

    20

    2026.01.22

    php会话教程合集
    php会话教程合集

    本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

    20

    2026.01.22

    宝塔PHP8.4相关教程汇总
    宝塔PHP8.4相关教程汇总

    本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

    10

    2026.01.22

    PHP特殊符号教程合集
    PHP特殊符号教程合集

    本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.22

    PHP探针相关教程合集
    PHP探针相关教程合集

    本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

    8

    2026.01.22

    菜鸟裹裹入口以及教程汇总
    菜鸟裹裹入口以及教程汇总

    本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

    52

    2026.01.22

    Golang 性能分析与pprof调优实战
    Golang 性能分析与pprof调优实战

    本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

    9

    2026.01.22

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Sass 教程
    Sass 教程

    共14课时 | 0.8万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3万人学习

    CSS教程
    CSS教程

    共754课时 | 22.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号