day02

作者: 特洛伊芋头 | 来源:发表于2018-06-21 19:09 被阅读0次

    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;
            }
    

    相关文章

      网友评论

        本文标题:day02

        本文链接:https://www.haomeiwen.com/subject/pxycyftx.html