【CSS】行内元素、行内块元素和块级元素

总结

1. 行内元素(内联元素)

(1)常见的行内元素:

行内元素 说明
最常使用(文本、链接)
修饰字体(加粗、倾斜)
上标、下标( x^{2}\bigstar x_{2} )
输入、图片

  换行

(2)特征:

  • 设置宽高无效
  • 对 margin 设置的左右方向有效,上下无效;对 padding 设置的上下左右都有效,即会撑大空间
  • 不会自动进行换行
  • 多个行内元素标签写在一起,默认排列方式为从左到右

2. 块级元素

(1)常见的块级元素:

块级元素 说明

    最常使用(分区、段落)

  1.   列表

    修饰字体
        表单、表格

          水平分隔线

    (2)特征:

    • 设置宽高有效
    • 对 margin 和 padding 设置的上下左右均有效
    • 可以自动进行换行
    • 多个块级元素标签写在一起,默认排列方式为从上至下

    3. 行内块元素(内联块元素)

        特征:

    • 设置宽高有效
    • 对 margin 和 padding 设置的上下左右均有效
    • 不会自动进行换行
    • 多个行内块元素标签写在一起,默认排列方式为从左到右

    4. 三者的转换

    (1)转换为行内元素:display:inline

    (2)转换为块级元素:display:block

    (3)转换为行内块元素:display:inline-block

    5. 其他

        注意:静态定位的元素不会受到 top / bottom / left / right 影响。更多详情,请参考【CSS】Position 定位。
     

    参考:

    菜鸟教程

    HTML行内元素、块状元素、行内块状元素的区别

    END

    你可能感兴趣的:(CSS)