博客
关于我
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中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
查看>>
mysql中的undo log、redo log 、binlog大致概要
查看>>
Mysql中的using
查看>>
MySQL中的关键字深入比较:UNION vs UNION ALL
查看>>
mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
查看>>
mysql中的字段如何选择合适的数据类型呢?
查看>>
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>
mysql中穿件函数时候delimiter的用法
查看>>
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>
Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
查看>>
Mysql中视图的使用以及常见运算符的使用示例和优先级
查看>>
Mysql中触发器的使用示例
查看>>
Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
查看>>
mysql中还有窗口函数?这是什么东西?
查看>>