前端之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>

二 inline-block属性值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

        margin:;

        padding:;

        }

        .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>

三float 父级塌陷

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:;

            padding:;

        }

        .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>

四清除浮动

<!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>

五 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>

六 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>

七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>

八 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;width: 300px;height: 300px"></div>

<div class="div1">

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

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

</div>

</body>

</html>

九 txet

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:;

            padding:;

        }

        ul li{

            list-style:none;

        }

    </style>

</head>

<body>

<ul>

    <li>11</li>

    <li>11</li>

    <li>11</li>

</ul>

</body>

</html>

巴特西

前端之css笔记3

最新文章

热门文章