关于行内标签、块级标签和行内块标签的特点、嵌套规则、区别、相互转换等汇总

行内标签也可叫行内元素、内联元素、内嵌元素

块级标签也可叫块级元素

块级标签

        特点:独占一行,对高度、宽度、行高以及顶(margin-top)和底边距(margin-bottom)都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

eg:<p>,<div>,<article>,<section>,<footer>

行内标签

        特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高(line-height)以及顶和底边距(可以设置左右margin,左右padding,不可以设置上下margin,上下padding),靠内容撑开宽高!

        eg:,<span>,<a>最好只设置宽高中其中一个,会进行等比例缩放;alt属性,如果图片找不到时,可显示alt属性的值)

行内块标签

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

        eg:<input>,<img>

嵌套规则:

        1、块级标签中,可以嵌套块标签的,也可以嵌套行内标签。

        2、p标签中只能容纳行内标签;不能容纳其他块级标签,也不能容纳p标签自己。

        示例:p标签内 嵌套 块级标签div    

             <p>

                    <div></div>

             </p>

          这样写后,浏览器会认为是

         <p></p>

        <div></div> 

        <p></p>

小伙伴们可以自己试一下哦

 

3、行内标签只能嵌套行内标签,不能嵌套块元素,但是a不能包含a(原因同上示例,不再演示)。

各标签之间的区别:

        块标签:独占一行,对高度、宽度、行高以及顶(margin-top)和底边距(margin-bottom)都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

        行内标签:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高(line-height)以及顶和底边距(可以设置左右margin,左右padding,不可以设置上下margin,上下padding),靠内容撑开宽高!

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

各种标签之间的转换

        1、块级标签转换为行内标签:display:inline;

        2、行内标签转换为块级标签:display:block;

        3、转换为行内块标签:display:inline-block;

表格直观呈现

    行内标签块级标签行内块标签
默认宽度内容宽度屏幕宽度内容宽度
是否独占一行与行内和行内块标签可以在一行与行内和行内块标签可以在一行
能否设置宽高不能
是否能设置4个方向的margin不能设置上下margin,可以设置左右margin

 

感谢您的观看,如有错误,请各位大佬批评指正,不胜感激!

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值