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

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

块级标签也可叫块级元素

块级标签

        特点：独占一行，对高度、宽度、行高以及顶(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	能	能

 

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