登录  /  注册

html块级标签,行内标签,行内块标签的显示模式有哪些

php中世界最好的语言
发布: 2018-01-22 11:09:58
原创
3336人浏览过

这次给大家带来html块级标签,行内标签,行内块标签的显示模式有哪些,使用html块级标签,行内标签,行内块标签显示模式的注意事项有哪些,下面就是实战案例,一起来看一下。

今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用,比如宽、高、水平居中等,其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方,所以我就把它记下来!

比如会有一种情况,给p标签水平居中有作用,但是给font加水平居中属性就没作用(如下):

p{ color:red; text-align:center;}
font{color:red; text-align:center;}    

我是块级标签p


我是行内标签font  

运行预览之后p能使文本水平居中,但是font就不可以

那么以上这个问题就和html中的显示模式有关了:

显示模式的特性:

主要分为两大类:

块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!

其中还有一种结合两种模式有点的显示模式:

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

在html中显示模式分为块级和行内,其中常用的块级有:p,p,h1~h6,ul,li,dl,dt,dd...  常用的行内有:span,font,b,u,i,strong,em,a,img,input,其中img和input为行内块元素。

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

1、块级标签转换为行内标签:display:inline;
2、行内标签转换为块级标签:display:block;
3、转换为行内块标签:display:inline-block;
登录后复制

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

在这之前有说过 text-align这个属性是否生效,原因是块级标签如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽,那么在100%的宽度中居中生效;但是行内元素的宽完全是靠内容撑开,所以宽度就是内容撑开的宽,我们给个背景测试看看:

所以块级是在盒子中间居中了,但是因为行内元素的宽就是内容宽,没有可居中的空间,所以text-align:center;就没有作用;但是如果给font转换为块级就不一样了:

p{ background:green; color:red; text-align:center;}    
font{background:green;color:red; text-align:center;display:block;}
登录后复制

同理,要是块级转换为行内了,文本也不能居中显示了。

因为在html中,行内元素被视为有文字特性的标签,块级能使文本水平居中,那么在块级当中的行内标签被视为文本的特性,那么块级使用text-align:center;的话,里面的行内标签会被像文本一样水平居中在块级标签中:

不加text-align:center;时:

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>
登录后复制

加上text-align:center;后

p{ padding:5px;background:green; color:red;text-align:center;}    
font{ background:yellow;}
登录后复制

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML基础知识,关于超链接设置的样式的详细介绍

HTML的基础知识.关于css样式表和样式属性的详细介绍

HTMLa标签的href属性指定相对路径与绝对路径使用方法

以上就是html块级标签,行内标签,行内块标签的显示模式有哪些的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号