css元素类型详解

css元素类型详解

css的元素暂时而言被分为三类：块状元素、内联元素（行内块元素也可称内联元素）、可变元素

当然我只简单的谈谈默认情况下各元素的一些特点

      块状元素特点：1：在页面中以矩形区域显示。

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

               3：可以直接添加宽高

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

 常用块状元素： div -最常用的块级元素

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

        form - 交互表单

        h1 -h6- 大标题

        hr - 水平分隔线

        ol – 有序列表

        p - 段落

        ul -li- 无序列表

        fieldset - 表单字段集

        colgroup-col - 表单列分组元素

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

      内联元素特点：1：在页面中最小单位也是矩形。

               2：在一行内逐次排列。

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

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

               5: 内联元素在一行内排列的时候，之间有间距（消除间距：a:添加浮动 b:把所有的内联元素都放在一行不用回车键（不推荐））

  常用内联元素：a –超链接（锚点）                               

        b - 粗体(不推荐) 

        br - 换行                             

        i - 斜体

        em - 强调                             

          （img - 图片 input - 输入框）               

        label - 表单标签                  

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

        strong - 粗体强调

        sub - 下标   

        sup - 上标

        textarea - 多行文本输入框

        u - 下划线

        select - 项目选择  

      可变元素（了解）：根据上下文的显示，来确定这个元素是块状元素还是内联元素

            <button>按按钮按钮按钮钮</button>

元素类型的转换：display属性：检索或者设置元素生成的盒模型类型。

           常用属性值：1.display:block            

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

                （大部分块状元素，默认的display的值都是block）

          2. display:inline    

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

                （大部分内联元素，默认的display的值inline）

         3. display:none    

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