day02

A.今天学到了什么

1.盒子模型的传参

/*1.只传一个参数的时候，四个方向都发生改变*/
   margin:100px;
/* 2.传2个参数的时候。第一个参数代表上下，第二个参数代表左右*/
   margin:100px 200px;
/* 3.传三个参数的时候，第一个代表上，第二个参数代表左右，第三个参数代表下（按照上右下左的瞬时间顺序改变）*/
   margin:100px 200px 300px;

2.html标签的分类

2.1块标签

/*块标签的特点
   1.独占一行
    2.能设置宽width 高heigth*/ 
<div>  <p>  <h1>~<h6>   <ul> <li>  
<dl>  <dt>  <dd>

2.2内联标签

/*内联标签的特点
   1.并排显示
   2.不能设置宽高
   3.不能设置margin top 和bottom*/
    <a href=""></a> 
<span>span</span>   
<strong>strong</strong>
 <i>i</i>
 <em>em</em>  

2.3内联块

/*内联块的特点
   1.并排显示
   2.可以设置宽高*/
<img>   <button>  <input>

2.4br标签

  <br>标签是换行

3.水平居中

 /*方法1.
    不改变属性实现水平居中
    给他的父级元素添加text-align center;
    */
 /*方法2.
在ssc里面加display：block*/
 button{  
         display: block;
      }

4.选择器

4.1 分组选择器

/*用逗号隔开*/
div,h1,p{
        color: red;
    }

4.2后代选择器

  /*
        .parent>h1{}
        选择parent之后的直接子元素（不包括孙子类元素）
        .parent h1{}
        选择parent 之后的所有子元素*/
        /* .parent>h1{
            color: red;
        } */
        .parent h1{
            color: red;
        }

<div class="parent  ">
        <h1>hello world</h1>
        <h1>hello world</h1>
 </div>

4.3兄弟选择器

   /*div+p
          +号是选择div之后的第一个p元素
     div~p
          ~号是选择div之后的所有P元素
          */
        /* div+p{
            color: red;
        } */
        div~p{
            color: red;
        }

 <div>hello world</div>
    <p>ppp</p>
    <p>ppp</p

4.6 focus的用法

   /*focus  鼠标点上去的时候产生效果*/
    input:focus{
        background: red;
    }

5.伪元素

/*是指没有在标签里面命名 ，在css里面命名的元素*/
 div:before{
            content: "前面";
      }
 div:after{
            content: "后面";
        }

     <div>hello world</div>

6.属性选择器

6.1属性选择器的用法

/*代表有class=one 的P标签*/
  p[class=one]{
            width: 100px;
            height: 100px;
            background: red;
        }

   <p class="one">hello world</p>
   <p>hello world</p>

6.2选择器的优先级别排序

//  优先级别：id>class>p
如果用import修饰了 则为第一优先级别
 <p class="one" id="two">hello world </p>

   p{
        color: red ! important;
        }

7.背景

7.1设置背景

  /* 设置背景图片 */
            background-image: url("images/icon1.png");
            /* 没有重复 */
            background-repeat: no-repeat;
            /* X,Y轴重复 */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            /* background-repeat: repeat; */
            background-position-x:  50px;
            background-position-y:  50px;
            background-position: center center;

7.2背景吸附

.one{
      /*如果子元素不给宽度则会继承父元素的宽度，
        这种继承关系只发生在块元素之间*/ 
            height: 400px;
            background-color: white;
            background-image: url("images/banner.jpg");
            background-attachment: fixed;
        }

7.3背景大小

 div{
            width: 800px;
            height: 400px;
            background-image: url("images/down.jpg");
           /*没有重复*/
            background-repeat: no-repeat;
           /*X轴重复*/
            background-repeat: repeat-x;
            background-color: red;
           /*图片填满*/
            background-size: 100% 100%;
        }

7.4背景简写

/*简写步骤
   颜色 color 图片 img  是否重复 repeat  位置 position*/
background: #eee url("images/down.jpg") no-repeat center center;

8. 雪碧图

div{
            width: 18px;
            height: 18px;
            background-color: #333;
            background-repeat: no-repeat;
            background-image: url("images/icons_type.png");
            background-position-x: -38px;
        }