"css元素类型详解"，"css盒模型简介",css选择符归纳。

一.元素类型分类：

                           块状元素，内联元素，可变元素。（把行内块元素归在内联元素这一类里面。）

    1.每个类型的特点：

     （1）块状元素的特点：

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

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

               c.可以直接添加宽高。

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

     （2）内联元素的特点：

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

               b.在一行内逐个排列。

               c.不可直接添加宽高，大小由内容撑开。

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

     （3）可变元素：

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

    2.哪些是块状元素，哪些是内联元素

     （1）块状元素：

              div-最常用的块元素，dl,dt,dd-搭配使用的块级元素，form-交互表单，h1-h6-大标题，hr-水平分隔线，ol-有序列表，p-段落，ul-无序列表，filedset-表单字                段集，colgroup-col-表单列分组元素，table-tr-td-表格及行-单元格，

     （2）内联元素：

             a-超链接，b-粗体，br-换行，i-斜体，em-强调，img-图片，input-输入框，label-表单标签，span-常用的内联容器，strong-粗体强调，sub-下标，sup-上                 标，textarea-多行文本输入框，u-下划线，select-项目选择。

二.css盒模型：

     1.盒模型是网页布局的基石，从里到外包括：内容区，内填充，盒子边框，外边距。

     2.padding的用法：

        a.padding是长在内容和盒子之间的，在盒子内部。

        b.padding是为了调整子元素在父元素里面的位置关系。

        c.padding的特点：padding值会把盒子撑大。

        d.如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。

        e.给单一方向设置padding值：padding-left/right/top/bottom；

        f.padding  设置方法：

                 padding：1个值   四周，padding：2个   上下左右，padding：3个值   上左右下，padding：4个值  上右下左

        g.padding不能设置负值

        h.padding不会对背景图造成影响.

        i.如图一个盒子没有设置固定的宽和高，添加padding是不用减的。

     3.margin：

       a.margin长在元素之外的

       b.margin控制的是同级元素之间的位置关系

       c.margin不会对盒子本身的宽高造成影响

       d.给单一方向添加margin值

          margin-left/right/bottom/top;

       e.margin的设置方法：

          margin：1个值   四周，margin：2个值   上下左右，margin：3个值    上左右下，margin;4个值   上右下左

       f.margin可以设置负值

       g.margin常出现的bug：

          当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个元素添加margin-top会错误的加在父元素上面

          上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置

       h.margin：0 auto；让当前父元素里面左右局中

三.选择符：

                 选择符就是给标签起名字

   1.类型选择符

                 所有的html标签可以直接当作选择符进行应用 例：div/p/em/b/strong

                 特点：能选中当前结构里面全部同名标签

                 应用：想统一某一个标签样式的时候或者是清除某个标签默认样式

    2.id选择符

                起名字<标签 class="名称"></标签>

                特点：唯一性，在同一个页面里面，一个id名只能用一次

                应用：划分网格结构

    3.类选择符

               <标签 class"名称1 名称2...."></标签> 

               特点：一个元素可以有多个类名，类名可以重复出现。可以制定一类样式。

    4.群组选择符

      a.以逗号分隔的方式，把多个选择器组成一组，给整组添加样式。

       b.选择符1，选择符2，选择符3，选择符4{属性：属性值；}

   5.包含选择符（子代选择器/后代选择器）

                父元素  子元素{属性：属性值；}

   6.伪类选择器：

               a：link{color:red;}  /*未访问的链接状态*/            a：visited{color:green;} /*已访问的链接状态*/     

               a：hover{color:blue;} /*鼠标滑过链接状态*/        a：active{color:yellow} /*鼠标按下去时的状态*/

   7.通配符

               *{   }选择页面中所有的元素，*{margin:0；padding：0；}，margin：0;盒子外围间距清零，padding：0；盒子内部的距离清零。