webstrom学习笔记4

    
    
    







    

    

    

        

    

    

    



    



    
111
    
111
    
111
    
111

.c{
    width: 200px;
    height: 200px;
    background-color: palevioletred;
    position: relative;
   /* 使用相对定位不脱离文档流，对其他元素无影响，
    相对定位不能乱跑，只能相对原来的地方移动，只能用left、top
    */
    left: 30px;
    top: 40px;
}
.d{
    width: 300px;
    height: 200px;
    background-color: cadetblue;
    z-index: 30;
}
.a{
    width: 100%;
    height: 200px;
    background-color: palevioletred;
    margin-top: 50px;
    position: fixed;/*窗口定位,会脱离文档流，相对浏览器窗口，无论怎么拉都不会看不见*/
    left: 0;
    top: 0;
}
.b{
    width:100%;
    height: 2000px;
    background-color: cadetblue;
}

.e{
    width: 400px;
    height: 400px;
    background-color: palevioletred;
    position: relative;
    left: 0;
    top: 0;
}
.f{/*子绝父相，父元素定位，子元素在父元素中跑，
如果父元素没有定位就找父元素的父元素，如果实在没有，那就再body里面跑*/
    width: 200px;
    height: 200px;
    background-color: cadetblue;
    position: absolute;
}

.clear{
    clear: both;/*清除浮动，消除上一个div造成的影响*/
}
.h{
    width: 200px;
    height: 200px;
    background-color: lightpink;
  float: right;
   /* float: left;*/
    /*浮动，向左向右，特点：浮动的元素会脱离文档流,只能在一行上跑，
    第一种：当浮动的元素遇到其他的浮动元素就会停下来，第二种，遇到父元素就会停下来
*/
}
.i{
    width: 300px;
    height: 300px;
    background-color: palegreen;


}
.g{
    width: 400px;
    height: 400px;
    background-color: peru;

}
.s{
    width: 100%;
   /* 如果没写高度，高度则就认为子元素高度之和,如果子元素全部浮动，则看不到父元素的黑色框*!
    如果写了高度，父元素不会随着子元素的变化而变化*/
    background-color: black;
}

.z {
    width: 200px;
    height: 200px;
    background-color: peru;
     display: block;/*块级元素展示，能将行变成块*/
     display: none;/*元素消失，不占位置*/

    display: inline-block; /*元素首先按块级元素展示，其次不在占一整行，会保留宽高*/
    cursor:wait;/*进度条*/
        /*progress;进度条*/
        /*crosshair;/*十字*/
        /*pointer;/*鼠标展示小手*/

}
.m{
    width: 200px;
    height: 300px;
    background-color: lightpink;
    /*overflow: hidden;!*超出的部分隐藏起来*!*/
   /* opacity: 0.5;!*元素透明，0-1取值*!*/

}
/*鼠标点上去元素的样式，整体是个选择器*/

.m:hover{
    background: black;
    width: 500px;
    cursor: progress;
}

.n{
    width: 300px;
    height: 200px;
    background-color: cadetblue;
}

ul{
    list-style: none;/*去点*/
}