css补充

    
    
    Document
    
        .c1 {
            color: red;
            font-size: 16px;
            border: 1px solid red;
        }
        .c1:hover {
            color: green;
            font-size: 40px;
            border: 5px solid green;
        }
        .c2 {
            color: red;
            font-size: 16px;
            border: 1px solid red;
        }
        .download {
            display: none;
        }
        .c2:hover .download {
            display: block;
        }
    


    hello world
    
        

    
    
    Document
    
        .c1 {
            height: 400x;
            width: 600px;
            margin: 0 auto;
        }
        .c1:hover {
            background-image: url('https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png');
        }
    


    
        
    

一些影藏的东西可以用鼠标悬浮显示，第一种是用hover改变display属性，第二种是改变background-image属性，第二种直接改变image，但是好像之前不能有背景图,可以有透明度为1也就是不透明的颜色背景来显示一个区域，在这个区域里鼠标放上去hover那里的图片就显示出来

 border: 10px solid transparent;这个透明边框最好不要加到hover里面，会有一个动的效果（边框有厚度），这样还可以用hover给透明边框加一个变化的颜色

    
    Title
    
        .c1:after {
            content: "yysd";
        }
    


    huakka
    balala

    
    Title
    
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
        
        .item {
            float: left;
        }
        .bg {
            background-color: blue;
        }
    


    
        
            yyyyy
            xxx
            

 .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
这个css伪类选择器直接在那些浮动标签后面加了块级空格，并clear：both，和那个直接div clear:both一样

    
    Title
    
        .back {
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid black;
            right: 10px;
            bottom: 50px;
        }
    


    
        
        

这个位置可以随便放

---

    
    Title
    
        body {
            margin: 0;
        }
        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 200px;
            z-index: 1000;
        }
        .mask {
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 1;
            z-index: 999;
        }
    


    asdfasdfasd
    
    

   z-index属性值越大就在显示层上层，opacity透明度为1时会让mask让背景全黑，看不到文字

    
    Title
    
        .c1 {
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
        }
        .c1 .c2 {
            height: 59px;
            width: 59px;
            background-color: #00FF7F;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
    


    
        
    

 这个ralative就是给这个标签内的标签提供相对定位参照

id选择器，标签选择器，类选择器，后代选择，属性选择，伪类选择都可以一直嵌套下去