博客
关于我
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-架构篇
查看>>
MySQL-索引的分类(聚簇索引、二级索引、联合索引)
查看>>
Mysql-触发器及创建触发器失败原因
查看>>
MySQL-连接
查看>>
mysql-递归查询(二)
查看>>
MySQL5.1安装
查看>>
mysql5.5和5.6版本间的坑
查看>>
mysql5.5最简安装教程
查看>>
mysql5.6 TIME,DATETIME,TIMESTAMP
查看>>
mysql5.6.21重置数据库的root密码
查看>>
Mysql5.6主从复制-基于binlog
查看>>
MySQL5.6忘记root密码(win平台)
查看>>
MySQL5.6的Linux安装shell脚本之二进制安装(一)
查看>>
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>