前端之css笔记3

一 display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        <!--.c1{-->
            <!--width:100px;-->
            <!--height:200px;-->
            <!--background-color:darkorange;-->
        <!--}-->

        <!--.c2{-->
            <!--width:100px;-->
            <!--height:200px;-->
            <!--background-color:green;-->
            <!--&lt;!&ndash;display:none;&ndash;&gt;-->
        <!--}-->

        <!--.c3{-->
            <!--width:100px;-->
            <!--height:200px;-->
            <!--background-color:rebeccapurple;-->
        <!--}-->

        <!--.outer:hover .c2{-->
            <!--display:none;-->
        <!--}-->

        div{
            width:200px;
            height:200px;
            bockground-color:green;
            display:inline;
        }

        span{
            width:200px;
            height:200px;
            background-color:wheat;
            display:block;
            }

    </style>
</head>
<body>

<div>DIV</div>

<span>span</span>



<!--<div class="c1"></div>-->


<!--<div class="outer">-->
    <!--<div class="c2"></div>-->
    <!--<div class="c3"></div>-->
<!--</div>-->


</body>
</html>

View Code

二 inline-block属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
        margin:0;
        padding:0;
        }

        .c1{
        width:100px;
        height:200px;
        background-color:darkorange;
        display:inline-block;
        }

        .c2{
            width:200px;
            height:200px;
            background-color:green;
            display:none;
            margin-lift:-4px;
        }

        .c3{
            width:300px;
            height:200px;
            background-color:rebeccapurple;
            display:inline-block;
            margin-left:-5px;
        }

        ul li{
            list-style:none;
        }
        ul li a{
            width:20px;
            height:20px;
            float:left;
            padding:20px;
            margin-left:5px;
            background-color:wheat;
        }

    </style>
</head>
<body>

<a class="c1"></a>

<div class="c2"></div>
<div class="c3"></div>

<ul>
    <li class="item"><a href="">1</a> </li>
    <li class="item"><a href="">2</a> </li>
    <li class="item"><a href="">3</a> </li>
    <li class="item"><a href="">4</a> </li>
    <li class="item"><a href="">5</a> </li>
    <li class="item"><a href="">6</a> </li>
    <li class="item"><a href="">7</a> </li>
    <li class="item"><a href="">8</a> </li>
</ul>

</body>
</html>

View Code

三float 父级塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box1,.box2{
            float:left;
            width:50%;
            height:60px;
        }

        .box1{
            background-color:wheat;
            }

        .box2{
            background-color:green;
        }
        .content{
            width:100%;
            height:60px;
            background-color:greenyellow;
        }

        .header{
            border:red 1px solid;
        }

        .clearfix:after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>

<div class="header clearfix">

    <div class="box1"></div>
    <div class="box2"></div>

</div>

<div class="content"></div>

</body>
</html>

View Code

四清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin :0px;
        }

        .div1{
            background-color:rebeccapurple;
            width:200px;
            height:100px;
            float:left;
        }

        .div2{
            background-color:teal;
            width:200px;
            height:200px;
            float:left;
            clear:left;
        }


        .div3{
            background-color:green;
            width:100px;
            height:300px;
            float:left;
            clear:right;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

View Code

五 a标签锚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fang1{
            width:100%;
            height:1000px;
            background-color:wheat;
        }


         .fang2{
            width:100%;
            height:1000px;
            background-color:red;
        }
         .fang3{
            width:100%;
            height:1000px;
            background-color:green;
        }

    </style>
</head>
<body>


<ul>
    <li><a href="#c1">第一章</a></li>
    <li><a href="#c2">第二章</a></li>
    <li><a href="#c3">第三章</a></li>
</ul>

<div class="fang1" id="c1">第一章</div>
<a href="#">返回顶端</a>
<div class="fang2" id="c2">第二章</div>
<a href="#">返回顶端</a>
<div class="fang3" id="c3">第三章</div>
<a href="#">返回顶端</a>
</body>
</html>

View Code

六 position定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin:0px;
        }

        .div1{
            background-color:rebeccapurple;
            width:200px;
            height:200px;
            }

        .div2{
            background-color:green;
            width:200px;
            height:200px;
            position:absolute;
            left:200px;
            top:200px;

        <!--position:relatinve--------;1, 参照物是以自己原来在文档流的位置  -->
                                        <!--2 物理位置依然存在-->

        }

        .div3{
            background-color:teal;
            width:200px;
            height:200px;
        }
        .father_box{
            position:relative;
            border: 2px solid red;
        }
    </style>
</head>
<body>


<div class="div1"></div>


<div class="father_box">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

</body>
</html>

View Code

七fix定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width:100%;
            height:2000px;
            background-color:wheat;
        }

        .returnTop{
            width:90px;
            height:35px;
            text-indent:10px;
            background-color:grey;
            color:white;
            tsxt-align:center;
            line-height:35px;
            position:fixed;
            right:20px;
            bottom:20px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<div class="returnTop">返回顶部</div>

</body>
</html>

View Code

八 marging塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0px;
        }

        .div1{
            background-color:rebeccapurple;
            width:300px;
            height:300px;

            overflow:hidden;
            <!--border:1px solid rebeccapurple;-->
            <!--padding:1px;-->
        }
        .div2{
            background-color:green;
            width:100px;
            height:100px;
            margin-top:20px;
        }

        .div3{
            background-color:teal;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>

<div style="background-color: bisque; 300px;height: 300px"></div>
<div class="div1">
    <div class="div2"></div>
    <div class="div3"></div>
</div>

</body>
</html>

View Code

九 txet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        ul li{
            list-style:none;
        }
    </style>
</head>
<body>

<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
</ul>
</body>
</html>

View Code