HTML行内元素块级元素和行内块状元素

  HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
         1.行内元素（inline element）：主要用来包裹文字，设置特殊意义或效果。
         2.块级元素（block element）：主要对页面进行布局                 
              ①一般情况下在块级元素中放行内元素，而不会在行内元素中放块级元素
              ②块级元素基本上什么都能放（包括块级元素）        
              ③p元素不能放任何块级元素（如出现不符规则浏览器自动纠正，右键-检查元素-element）
         3.行内块级元素（inline-block element）：同时具备行内元素、块状元素的特点。但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内元素
常见的行内元素：

a – 锚点
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
label – 表格标签
span – 常用内联容器，定义文本内区块
strong – 粗体强调
textarea – 多行文本输入框

块状元素
常用的块级元素：

address – 地址
blockquote – 块引用
center – 举中对齐块（不赞成使用，推荐css）
dir – 目录列表（不赞成使用，推荐css）
div – 常用块级容器，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

行内块级元素
常用的行内块级元素：<img> <input>

    行内元素特点：display:inline;
         1、和其他元素都在一行上；
         2、元素的高度、宽度及顶部和底部边距不可设置；
         3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
    块级元素特点：display:block;
         1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
         2、元素的高度、宽度、行高以及顶和底边距都可设置。
         3、元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。
    行内块级元素的特点：display:inline-block;
         1、和其他元素都在一行上；
         2、元素的高度、宽度、行高以及顶和底边距都可设置

    备注：
    通过display属性对块级元素、行内元素、行内块元素可进行转换

本文地址：https://blog.csdn.net/no15870678621/article/details/107875434