第3周 CSS3浮动定位与背景样式

第1节 浮动与定位

　　1、浮动

　　　　1、浮动的基本概念

　　　　　　1、浮动的最本质功能：用来实现并排

　　　　　　

 

　　　　　　浮动使用要点：要浮动，并排的盒子都要设置浮动

　　　　　　父盒子要有足够的宽度，否则子盒子要掉下去

　　　　　　eg :

<body>
    <!--第一个大盒子-->
    <div class="box">

        <!--第一个小盒子-->
        <div class="c1"></div>

        <!--第二个小盒子-->
        <div class="c2"></div>

        <!--第三个小盒子-->
        <div class="c3"></div>
    </div>
</body>
.box {
    width: 600px;
    height: 200px;
    border: 1px solid #000;
}

.box .c1 {
    width: 200px;
    height: 200px;
    background-color: orange;

    float: left;   /*设置浮动属性*/
}

.box .c2 {
    width: 200px;
    height: 200px;
    background-color: green;

    float: left;  /*设置浮动属性*/
}

.box .c3 {
    width: 200px;
    height: 200px;
    background-color: blue;

    float: left;  /*设置浮动属性*/
}

　　> 显示效果

 

 

 　　　　2、浮动的顺序贴靠特性

　　　　　　子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找前一个兄弟元素，如果前一个兄弟也没有空间，去上上一个兄弟

　　　　　　

 

<body>
    <!--第一个大盒子-->
    <div class="box">

        <!--第一个小盒子-->
        <div class="c1"></div>

        <!--第二个小盒子-->
        <div class="c2"></div>

        <!--第三个小盒子-->
        <div class="c3"></div>
    </div>
</body>

 

.box {
    width: 600px;
    height: 400px;
    border: 1px solid #000;
}

.box .c1 {
    width: 300px;
    height: 200px;
    background-color: orange;

    float: left;   /*设置浮动属性*/
}

.box .c2 {
    width: 300px;
    height: 100px;
    background-color: green;

    float: left;  /*设置浮动属性*/
}

.box .c3 {
    width: 300px;
    height: 100px;
    background-color: blue;

    float: left;  /*设置浮动属性*/
}

　　　　3、右浮动

 

.box {
    width: 600px;
    height: 400px;
    border: 1px solid #000;
}

.box .c1 {
    width: 300px;
    height: 200px;
    background-color: orange;

    float: right;   /*设置浮动属性*/
}

.box .c2 {
    width: 300px;
    height: 100px;
    background-color: green;

    float: right;  /*设置浮动属性*/
}

.box .c3 {
    width: 300px;
    height: 100px;
    background-color: blue;

    float: right;  /*设置浮动属性*/
}

 

 

　　　　2、使用浮动实现网页布局

　　　　　　1、垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！

　　　　　　2、大盒子带着小盒子跑，一个大盒子中，又是一个小天地

　　　　　　3、盒子是无限的

　　　　

 

<body>
    <div class="all">
        <div class="box1">
            <div class="frist_one"></div>
            <div class="first_two">
                <div class="first_two_one"></div>
                <div class="first_two_two"></div>
                <div class="first_two_three"></div>
            </div>
        </div>

        <div class="box2">

        </div>

        <div class="box3">
            <div class="three_one"></div>
            <div class="three_two"></div>
            <div class="three_three">
                <div class="three_three_one"></div>
                <div class="three_three_two"></div>
                <div class="three_three_three">
                    <div class="three_three_three_one"></div>
                    <div class="three_three_three_two"></div>
                    <div class="three_three_three_three"></div>
                    <div class="three_three_three_four"></div>
                    <div class="three_three_three_five"></div>
                    <div class="three_three_three_six"></div>
                    <div class="three_three_three_seven"></div>
                </div>
            </div>
        </div>

        <div class="box4">

        </div>

        <div class="box5">

        </div>
    </div>
</body>

 

.all {
    width: 800px;
    height: 800px;
    background-color: #faf8f8;
}

.all .box1 {
    width: 800px;
    height: 100px;
    background-color: darkgrey;
}
.all .box2 {
    width: 800px;
    height: 100px;
    background-color: #faf8f8;
}

.all .box3 {
    width: 800px;
    height: 400px;
    background-color: darkgrey;
}

.all .box4 {
    width: 800px;
    height: 100px;
    background-color: #faf8f8;
}

.all .box5 {
    width: 800px;
    height: 100px;
    background-color: darkgrey;
}



/*开始排列第一个盒子*/
.all .box1 .frist_one {
    width : 200px;
    height: 100px;
    background-color: orange;
    float: left;
}

.all .box1 .first_two {
    width : 600px;
    height: 100px;
    float: left;
}

.all .box1 .first_two .first_two_one {
    width: 200px;
    height: 40px;
    background-color: green ;
    float: right;
}

.all .box1 .first_two .first_two_two {
    width: 600px;
    height: 20px;
    background-color: darkgrey;
    float: right;
}

.all .box1 .first_two .first_two_three {
    width: 560px;
    height: 40px;
    background-color: blue;
    float: right;
}

/*开始排列第三个盒子*/
.all .box3 .three_one {
    width: 200px;
    height: 400px;
    background-color: red;
    float: left;
}

.all .box3 .three_two {
    width: 40px;
    height: 400px;
    background-color: darkgrey;
    float: left;
}

.all .box3 .three_three {
    width: 560px;
    height: 400px;
    background-color: blue;
    float: left;
}

.all .box3 .three_three .three_three_one {
    width: 560px;
    height: 200px;
}

.all .box3 .three_three .three_three_two {
    width: 560px;
    height: 50px;
    background-color: red;
}

.all .box3 .three_three .three_three_three {
    width: 560px;
    height: 150px;
}


.all .box3 .three_three .three_three_three .three_three_three_one {
    width: 125px;
    height: 150px;
    float: left;
    background-color: yellow;
}

.all .box3 .three_three .three_three_three .three_three_three_two {
    width: 20px;
    height: 150px;
    float: left;
}

.all .box3 .three_three .three_three_three .three_three_three_three {
    width: 125px;
    height: 150px;
    float: left;
    background-color: yellow;
}

.all .box3 .three_three .three_three_three .three_three_three_four {
    width: 20px;
    height: 150px;
    float: left;
}

.all .box3 .three_three .three_three_three .three_three_three_five {
    width: 125px;
    height: 150px;
    float: left;
    background-color: yellow;
}

.all .box3 .three_three .three_three_three .three_three_three_six {
    width: 20px;
    height: 150px;
    float: left;
}

.all .box3 .three_three .three_three_three .three_three_three_seven {
    width: 125px;
    height: 150px;
    float: left;
    background-color: yellow;
}

 

 

　　　　3、BFC规范和浏览器差别

 

　　　　4、清楚浮动

　　

　　2、定位

　　　

　　　　1、相对定位

 

 

 

 

 

　　　　2、绝对定位

 

　　　  3、固定定位

　　　

 

 

第2节 边框与圆角

 

 

第3节 背景与渐变

 

 

第4节 2D与3D转换

 

posted @ 2022-09-09 20:35  dogRuning  阅读(43)  评论(0)  编辑  收藏  举报