元素类型的转换和标签的嵌套规则

最新推荐文章于 2025-12-01 21:03:28 发布

原创最新推荐文章于 2025-12-01 21:03:28 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文探讨了CSS中元素的分类，包括块状元素、内联元素和行内块元素，详细解释了display属性如何控制元素类型转换。特别关注图片元素作为置换元素的特性，解释了为何图片可以被直接赋予大小。

1级标题<!–

元素类型的转换：
        display属性：
            属性值：
                block
                inline
                none
    大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)
    大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)
–>

元素类型的分类：
        块状元素、内联元素、可变元素    元素类型的转换：
        display属性：
            属性值：
                block
                inline
                inline-block
                none
                list-item
    行内块元素：input      display为inline-block
    img标签：浏览器默认解析的display的值inline
–>

图片默认的display的值为inline 为什么图片能直接添加大小？？    从另一个角度对所有的标签进行分类。
    分为：置换元素与非置换元素
    置换元素：
        典型的置换元素：img\input 依赖标签的属性或者元素自身类型，来决定当前元素在页面中显示的状态。
        因为是置换元素所以能添加大小。因为置换元素在页面显示过程中，生成一个框（框架），这个框能添加大小的。    非置换元素：不是置换元素的都是非置换元素。