2018-07-11

1.CSS装饰的应用

1.盒子模型的数值个数设置的不同结果

1.margin

   传两个方向margin:100px  四个方向全部改变
   margin:100px   200px;  
   传两个参数top,bottom-- 100px   left,right -- 200px
   传三个参数  top--100 left,right -- 200  bottom --300
   margin:100px 200px  300px;
   传四个参数
   margin:100px 200px 300px 400px
   top right bottom left

2.padding

   传一个参数 四个方向都改变
   传两个参数 第一参数top,bottom 第二个参数left,right
   传三个参数 
   第一个参数top  第一参数left,right  第三个参数bottom
   传四个参数 top,right,bottom,left

3.元素内容的起始位置,是基于它自身width,height的起始位置

2.标签

1.快标签

    h1,p,div,ul,li,dl,dt,dd 
    特点:1.独占一行 2.能设置width,height
    默认 display：block；

2.内联标签

    a ，span， i ，em ，strong
    特点:1.并排显示 2.不能设置width,height 3.不能设置margin-top,margin-bottom
    默认 display：inline；

3. 内联块

     input,img,button
     特点:1.并排显示  2.能设置width,height
     默认 display：inline-block；

3.内联标签和内联块更改设置方法

1.display：block；

2.不改变display设置水平居中

       body{
       text-align:center:
       }
       body为母元素

2.选择器

1.分组选择器

         如p,h1,div{
        color:red;
        }

2.后代选择器

     .parent>p{}  只选择亲儿子元素
     如
     .parent>p{
        color:red;
    } 
     .parent p{} 选择parent之后的所有p元素 
    如
     .parent p{
        color:red;
    } 

3.兄弟选择器

    div+p{} -->选中div之后的第一个p元素
    div~p{} -->选中div之后的所有p元素
     如
     div+p{
        color:red;
    }
     div~p{
        color:yellow;
    }

4.伪元素-->用css自定义生产的元素

    div:before{
        content:""
    }
    div:after{
        content:""
    }
   如
    div:before{
        width:100px;
        height:100px;
        background: red;
        content:"前面";
        display: block;

    }
    div:after{
        content:"后面";
        display: block;
        width:100px;
        height:50px;
        background:yellow;
    }

效果图如下

111.png

5. 属性选择器

    语法
    element[attr=value]{

    }
     如
    [class="one"]{
        color:red;
    }

6.选择器的优先级别

      !important> id>class>p{}

7.选择器的权重

选择器嵌套的层次越深,那么权重越高
如

    

  

    
child

显示结果如下

111111.png