博客
关于我
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为什么不建议使用delete删除数据?
查看>>
MySQL主从、环境搭建、主从配制
查看>>
Mysql主从不同步
查看>>
mysql主从同步及清除信息
查看>>
MySQL主从同步相关-主从多久的延迟?
查看>>
mysql主从同步配置方法和原理
查看>>
mysql主从复制 master和slave配置的参数大全
查看>>
MySQL主从复制几个重要的启动选项
查看>>
MySQL主从复制及排错
查看>>
mysql主从复制及故障修复
查看>>
MySQL主从复制的原理和实践操作
查看>>
webpack loader配置全流程详解
查看>>
mysql主从复制,读写分离,半同步复制实现
查看>>
MySQL主从失败 错误Got fatal error 1236解决方法
查看>>
MySQL主从架构与读写分离实战
查看>>
MySQL主从篇:死磕主从复制中数据同步原理与优化
查看>>
mysql主从配置
查看>>
MySQL之2003-Can‘t connect to MySQL server on ‘localhost‘(10038)的解决办法
查看>>
MySQL之CRUD
查看>>
MySQL之DML
查看>>