二十至二十三章-CSDN博客

本文链接：https://blog.csdn.net/2301_80950331/article/details/134896256
<!DOCTYPE html><html>

    <head>

        <meta charset="utf-8" />

        <title>/</title>

        <style type="text/css">

           /* div{

                display: inline-block;

                padding: 20px;

                margin: 40px;

                border: 2px solid red;

                background-color: lightblue;

            }*/

            div,span{

                width: 100px;

                height: 50px;

            }

            div{border: 2px dashed red;}

            span{border: 1px solid blue;}  /*行内元素不可设置长宽*/

            #div1{

                width: 100px;

                height: 40px;

                border: 1px solid rebeccapurple;

            }

            #div2{

                width: 100px;

                height: 80px;

                border: 5px solid green;

            }

            #span1

            {

                width: 100px;

                height: 40px;

                border: 1px solid lightcoral;

            }

            #span2

            {

                width: 100px;

                height: 80px;

                border: 1px solid lightblue;

            }

        </style>
  <style type="text/css">

            #father

            {

                width: 300px;

                background-color: lightblue;

                border:1px solid silver;

            }

            #father div{

                padding: 10px;

                margin: 15px;

            }

            #son1{

                background-color: lightcoral;

                float: left;

            }

            #son2{

                background-color: lightgoldenrodyellow;

                float: right;

            }

            .clear{clear:both}

        </style>
 <style type="text/css">

            #first{

                width: 120px;

                height: 1800px;

                border: 1px solid gray;

                line-height: 600px;

                background-color: lightblue;

            }

            #second{

                position: fixed;

                top: 30px;

                left: 160px;

                width: 60px;

                height: 60px;

                border: 1px solid silver;

                background-color: lightcoral;

            }

            #father

            {

                margin-top: 30px;

                margin-left: 30px;

                border: 1px solid silver;

                background-color: lightgoldenrodyellow;

            }

            #father div{

                width: 100px;

                height: 60px;

                margin: 10px;

                background-color: lightslategray;

                color: white;

                border: 1px solid white;

            }

            #son2

            {

                position: relative;

                top:20px;

                left: 40px;

            }

    </head>

    <body>
        <div id="father">

        <div id="son1">box1</div>

        <div id="son2">box2</div>

        <div class="clear"></div>

        </div>

        <div id="div1">天天开心</div>

        <div id="div2">快快乐乐</div>

        <span id="span1">满分</span>    <!--宽度无法生效-->

        <span id="span2">150</span>
        <div id="first">无定位的div元素</div>

        <div id="second">有定位的div元素</div>

        <div id="father">

            <div id="son1">第一个无定位的div元素</div>

            <div id="son2">相对定位定位的div元素</div>

            <div id="son3">第二个无定位的div元素</div>

        </div>

    </body>

</html>