行内标签也可叫行内元素、内联元素、内嵌元素
块级标签也可叫块级元素
块级标签
特点:独占一行,对高度、宽度、行高以及顶(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 | 能 | 能 |
感谢您的观看,如有错误,请各位大佬批评指正,不胜感激!