CSS学习笔记(1) -- CSS元素类型详解

css中将标签元素类型大致分为三类

块状元素、内联元素、可变元素（其中将内联块状元素归为内联元素）

在默认情况下，每种元素都有自己的特点

块状元素特点：

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

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

               3. 可以直接为其添加宽、高

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

        内联元素特点：

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

               2. 可在一行内逐个排列

               3. 不可以直接添加宽、高，大小由内容撑开

               4. 内联元素也符合盒模型的规则

可变元素：

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

其中有几个点需要注意

1. 内联元素是符合盒模型的规则,但是个别属性会出现问题（padding-top/padding-bottom   margin-top/margin-bottom）

2. 内联元素在一行内排列的时候，之间有间距

                解决方法：

                    1. 添加浮动

                    2. html中把所有的内联元素都放在一行，不用回车键（不推荐）

 

平时我们用到的比较多的都是块状元素和内联元素

下面我整理了常用标签的分类

块状元素：

        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  项目选择

 

可变元素：

　　button        按钮

 

拓展知识点：任何元素添加浮动（float）属性，就可调整大小

 

在实际运用中，我们还会涉及到元素的类型转换

元素类型转换属性：

        display属性

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

　　  常用属性值：

            a. dispaly:block;  

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

                补充:大部分块状元素的默认值为 dispaly:block;

            b. dispaly:inline;

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

                补充：大部分内联元素的默认值为 diaplay:inline;

            c. dispaly:none;

                作用：将当前元素隐藏 并且不占据空间

            d. display:inline-block;

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

                补充： 只有当前元素的display的值为inline-block的时候，才能支持vertical-align属性

以上，是我对css元素类型的学习总结，欢迎大家补充