html行内元素和块级元素的区别?

HTML中的元素可以分为两种类型:行内元素(inline)和块级元素(block)

什么是行内元素

HTML的行内元素(inline element)是指那些不会打断文本流,在一行内显示的元素。行内元素通常用于包裹文本或者在文本中嵌入其他标记或元素。

常见的行内元素有:

行内元素的特性包括:

  • 不会独占一行,会在一行内显示。
  • 宽度和高度由内容决定,无法通过CSS设置固定的宽度和高度。
  • 可以设置左右外边距(margin)和内边距(padding),但上下外边距和内边距不会影响其他元素的布局。

需要注意的是,行内元素可以通过CSS的display属性设置为块级元素,使其以块级元素的方式显示。

什么是块级元素

HTML的块级元素(block-level element)是指那些会始终独占一行的元素,即会从新的一行开始显示。块级元素通常用于组织和布局页面内容的结构。

常见的块级元素有:

  • :用于组织和布局页面的块级内容。
  • :用于表示段落。

  • -
    :用于表示标题。

      1. :用于创建无序列表和有序列表。
      2. :用于表示列表项。
      3. :用于创建表格。
      4. :用于创建表单。
      5. 块级元素的特性包括:

        • 独占一行,会从新的一行开始显示。
        • 可以设置宽度、高度、外边距和内边距。
        • 默认情况下,宽度会自动填满父容器的宽度。
        • 可以包含其他块级元素和行内元素。

        需要注意的是,块级元素可以通过CSS的display属性设置为行内元素或者行内块元素,使其以行内元素的方式显示。

        元素转换

        需要注意的是,也可以通过CSS的display属性将行内元素转换为块级元素,或将块级元素转换为行内元素。如:

        行内元素转块级元素

            <style>
                .a{
                    display: block;
                }
            style>
        <body>
        <span class="a">1span>
        <span>2span>
        <span>3span>
        body>
        

        结果:
        在这里插入图片描述
        可以看到1加了转换独自占了一行,而2和3在一行里

        块级元素转行内元素

            <style>
                .a{
                    display: inline;
                }
            style>
        <body>
        <div class="a">1div>
        <div class="a">2div>
        <div>3div>
        body>
        

        结果:
        在这里插入图片描述
        可以看到1和2都转换为行内元素就在一行里了,而3没有转换所以独自一行

        总结

        行内元素:不会独占一行,会在一行内显示,宽度和高度是由内容决定的,不能固定宽高,可以设置内外边距不会影响其他元素。
        块级元素:独占一行,会从新的一行开始显示,可以设置宽度、高度、外边距和内边距,然后默认情况下,宽度会自动填满父容器的宽度。

        你可能感兴趣的:(HTML,html,前端,css)