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++开发框架推荐,阅读专题下面的文章了解更多详细内容。

    3

    2026.01.09

    c++框架学习教程汇总
    c++框架学习教程汇总

    本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

    7

    2026.01.09

    学python好用的网站推荐
    学python好用的网站推荐

    本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.09

    学python网站汇总
    学python网站汇总

    本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

    1

    2026.01.09

    python学习网站
    python学习网站

    本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

    4

    2026.01.09

    俄罗斯手机浏览器地址汇总
    俄罗斯手机浏览器地址汇总

    汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

    9

    2026.01.09

    漫蛙稳定版地址大全
    漫蛙稳定版地址大全

    漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

    14

    2026.01.09

    php学习网站大全
    php学习网站大全

    精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

    2

    2026.01.09

    php网站搭建教程大全
    php网站搭建教程大全

    本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

    6

    2026.01.09

    热门下载

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

    精品课程

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

    共14课时 | 0.7万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 2.8万人学习

    CSS教程
    CSS教程

    共754课时 | 18.3万人学习

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

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