前端 day9

一 、元素类型

    1.html对标签的分类

       单标记、双标

    2.css的显示对标签的分类

       1.块状元素、内联元素（行内元素）

             第3个归类有争议：

                     第1个观点：可变元素

                    第2个观点：行内块元素

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

         其中，把行内块元素归为内联元素这一类

    3.默认情况下元素类型种每个类型特点

      块状元素特点：

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

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

          3.可以直接添加宽高

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

     内联元素特点：

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

           2.在一行内逐个排列

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

           4.内联元素也符合盒模型的规则，但是个别属性会出现问题

          （padding-top/right      margin-top/bottom）

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

               怎么消除间距：

                   1.添加浮动

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

二、元素类型的转换

     1.display属性：

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

 

        常用属性值：

              1.display:block;

                  作用：将元素转化成块状元素，拥有自己的元素特点

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

              2.display:inline;

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

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

             3.dispaly:none;

                 此元素不会被显示

 

            4.dispaly:table;

               此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

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

三、哪些元素是块标签、哪些元素属于内联标签

      1.块状元素：

          div          最常用的块级元素

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

         form         交互表单

         h1-h6         大标题

          hr            水平分割线

         ol            有序列表

         p             段落

         ul            无序列表

          li      

          fieldset        表单字段集

          colgroup-col     表单列分组元素

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

     2.内联元素

          a            超链接（锚点）

          b            加粗（不推荐）

         br            换行

         strong        粗体强调

         i             倾斜

         em           倾斜强调

         img           图片

         input          输入框

         lable          表单标签

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

         sub            下标

         sup            上标

         textarea         多行文本输入框

         u               下划线

         select            项目选择