什么是块元素、行元素以及行内块元素

2023年 12月 30日 54.5k 0

一、块级元素

块级元素(Block-level elements)是指在HTML中以块的形式显示的元素。它们通常有以下特征:

  • 块元素在页面中以区域块的形式出现
  • 每个块元素通常都会独自占据一整行或多个整行
  • 可以对其设置宽度、高度、对齐等属性
  • 块级元素可以包含其他块级元素和内联元素

常见:元素有~

、、

、、

    、、

  • 等,其中标记是最典型的块元素。

    块元素的默认属性:

    display: block

    二、行内元素

    行内元素(Inline elements)是指在HTML中以行内的方式显示的元素。行内元素也称为内联元素或内嵌元素,常用于控制页面中文本的样式。它们通常有以下特征:

    • 一个行内元素通常会和其前后的其他行内元素显示在同一行中,不占独立的区域
    • 仅仅靠自身的字体大小和图像尺寸来支撑结构
    • 一般不可以设置高度、宽度等属性
    • 只能设置水平方向的外边距

    常见的行内元素有、、、、、、、、、等, 其中标记是最典型的行内元素

    行内元素的默认属性:

    display: inline

    三、行内块级元素

    行内块级元素,它既具有块级元素的特点,也有行内元素的特点。

    • 和相邻的行内元素(包含行内块)在同一行显示
    • 可以任意设置元素宽度、高度以及内外边距
    • 默认宽度就是内容的宽度(行内元素的特点)

    常见的行内块级元素有、

    行内块级元素的默认属性:

    display: inline-block

    四、元素之间的转换

    块级元素、行内元素、行内块级元素之间可以相互转换,设置相应的display属性值即可。对于display存在属性值为none,意思是设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏元素:

    display: none

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论