博客
关于我
css块级标签,行内标签,行内块标签的转换(2)
阅读量:451 次
发布时间:2019-03-06

本文共 1488 字,大约阅读时间需要 4 分钟。

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

  • 本文原创作者:雨点的名字
  • 作者博客地址:

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

HTML标签的分类

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

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

块级标签 

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

典型的块级标签有:<div> ,h系列,<li>,<dt>,<dd>,<p> ,<form>,<ul>

行内标签 

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

典型的行内标签有:<span>,<a>,<b>,<i>,<u>,<em>,<strong>,<label>,<br>

行内块标签 :

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

典型的行内标签有:<img><input>

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

 

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

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

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

 

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

下面请看如下示例:

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

1  2  3      4         行内标签转块级标签 5         13     14       
15 百度16
17

 

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

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

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

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

 

1  2      3         块级和行内块级 4         18     19     20         百度   
21 百度一下22
我是div1
23
我是div2
24 25

运行结果:

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

1  2  3      4         块级标签转行内标签 5         13     14     15          
谷歌
16
https://www.google.com
17 18

效果如下:

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

 

 

转载地址:http://aoffz.baihongyu.com/

你可能感兴趣的文章
Mysql 常见错误
查看>>
mysql 常见问题
查看>>
MYSQL 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>