CSS元素类型详解

元素类型：

HTML中对标签的分类：（1）单标签       （2）双标签

CSS显示对标签元素分类：

                    块状元素

                    内联元素（行内元素）

       争议点：

            第三类：

                    A：可变元素

                    B：行内块元素

元素类型分类：块状元素、内联元素、可变元素。

 

默认情况下元素类型每个类型特点：

块状元素特点：

             1：在页面中以矩形区域显示。

             2：自上而下排列，独占一行。

             3：可以直接添加宽高。

             4：一般情况下，作为其他元素或内容的容器。

内联元素特点：

            1：在页面中最小单位也是矩形。

            2：在一行内逐个排列。

            3：不可以直接添加宽高，大小是由内容撑开的。

            4：内联元素也符合盒模型的规则，但是个别属性会出现问题。（padding-top/bottom    margin-top/bottom）

            5: 内联元素在一行内排列的时候，之间有间距。

消除间距：

          a:添加浮动 

          b:把所有的内联元素都放在一行不用回车键（不推荐使用）

可变元素：

            根据上下文的显示，来确定这个元素是块状元素还是内联元素

            <button>按钮</button>

 

块状元素：

        div：最常用的块级元素

        dl和dt-dd：搭配使用的块级元素

        form： 交互表单

        h1 -h6：大标题

        hr：水平分隔线

        ol：有序列表

        p： 段落

        ul：无序列表

        li

        fieldset：表单字段集

        colgroup-col：表单列分组元素

        table-tr-td：表格及行-单元格

内联元素：

        a：超链接（锚点）                              

        b： 粗体(不推荐)

        br： 换行                            

        i： 斜体

        em： 强调                            

        img： 图片                        

        input： 输入框              

        label： 表单标签                 

        span： 常用内联容器，定义文本内区块

        strong：粗体强调

        sub： 下标  

        sup： 上标

        textarea： 多行文本输入框

        u： 下划线

        select： 项目选择 

拓展知识点：

          任何元素添加浮动，都可以设置大小。

 

元素类型的转换：

display属性：

                         作用：检索或者设置元素生成的盒模型类型。

常用属性值：

            A： display:block;

                作用：将元素转成块状元素，拥有块状元素特点。

                补充：大部分块状元素，默认的display的值都是block;

            B： display:inline;

                作用：将元素转成内联元素，拥有内联元素的特点。

                补充：大部分内联元素，默认的display的值inline;

            C： display:none;

                 作用：将当前隐藏，并不占据空间。

内联元素里面特殊的一个：行内块元素（内联块元素）

特点：   1：可以设置宽高。

             2：默认情况下，在一行内逐个显示，之间有间距。

             3：当前元素的display值为inline-block时，能支持vertical-align属性。

vertical-align：；垂直对齐     属性值：

top：；   顶线对齐   

bottom：； 底线对齐

middle：；中线对齐

baseline：；基线对齐

 

行内块元素：input；

img是个特殊的存在，当做行内块元素使用，因为它拥有行内块元素的特点；但是img在默认情况下，img在浏览器中的display值为inline！

 

从另一个角度对所以标签进行分类：

分为置换元素和非置换元素

置换元素：典型的置换元素：img和input；依赖标签的属性或者元素自身类型来决定当前元素在页面中显示的状态。

非置换元素：不是置换元素的都是非置换元素。