博客
关于我
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中B+Tree索引原理
查看>>
mysql中cast() 和convert()的用法讲解
查看>>
mysql中datetime与timestamp类型有什么区别
查看>>
MySQL中DQL语言的执行顺序
查看>>
mysql中floor函数的作用是什么?
查看>>
MySQL中group by 与 order by 一起使用排序问题
查看>>
mysql中having的用法
查看>>
MySQL中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>