Day03-网页布局实战-浮动

金霖海

已于 2023-02-23 19:54:00 修改

阅读量221

点赞数

分类专栏：前端1 文章标签： css css3 html

于 2022-12-03 10:14:49 首次发布

本文链接：https://blog.csdn.net/qq_33396183/article/details/128158221

版权

前端1 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

文章目录

网页布局实战

网页布局实战

一网页布局实战-内边距

案例1-父div跟子div有顶部间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aqua;
            padding-top: 50px;
        }

        .father .child{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>

知识点

内边距

案例2-内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* padding-top: 50px;
            padding-left: 50px;
            padding-bottom: 50px;
            padding-right: 50px; */

            /* 上下左右内边距尺寸一样 */
            /* padding: 50px; */

            /* 上下内边距50px 左右内边距100px */
            /* padding: 50px 100px; */

            /* 顺时针上 右 下 左 */
            /* padding: 10px 20px 40px 80px; */
        }

        .father .child{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>

padding:一个值

padding:两个值

padding:四个值

案例3-盒子模式

标准模式
一个盒子最终的宽度 = width+border*2 + padding

一个盒子最终的高度 = height + border * 2 + padding

怪异模式
一个盒子最终的宽度 = width

一个盒子最终的高度 = height

怎么使用怪异模式

需要在盒子的样式上，加一个 box-sizing样式
box-sizing:content-box; 使用标准模式(默认)
box-sizing:border-box; 使用怪异模式

二文档流

1. 块标签：独占一行,用来做布局
2. 行标签：填充内容,多个行标签共享一行

元素从左到右,自上而下的排列方式称为文档流,元素不遵循这种排列方式称为脱离文档流

三网页核心布局-进阶

案例1-让两个div排成一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 左浮动 */
            float: left;
        }

        .div2{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 右浮动 */
            float: right;
        }

        .div3{
            width: 300px;
            height: 300px;
            background-color: gold;
        }
        .father{
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- 
        标准文档流
            内容遵循,从左向右排列,从上向下排列,这就是标准文档流
        行标签：填充内容,多个行标签共享一行
        块标记: 布局排版,一个div独占一行

        脱离文档流
            div不再独占一行


        浮动的作用:让div水平排列    
     -->
     <div class="father">
        <div class="div1"></div>
        <div class="div2"></div>
     </div>


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

浮动:float

浮动会使元素脱离文档流

浮动属性

float:left; 左浮动

float: right; 右浮动

案例2-清除浮动

浮动布局遇到的问题

给盒子加float属性后，当前盒子就脱离标准文档流,可能会造成父容器高度塌陷

清除浮动的方案

给这个大盒子一个固定高度就可以清除浮动造成的影响
在浮动盒子的末尾，再加一个空div, 用于清除当前盒子浮动的影响。

练习思路

1.父div包裹2个小div
2.给父div加背景色,给小div加宽高和背景色
3.观察父div的高度
4.给小div加浮动
5.观察父div的高度
6.清除浮动,a.给父div加固定高度   b.新增一个div,设置样式为clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father{
            /* 给大盒子加固定高度,可以清除浮动影响 */
            /* height: 100px; */
            background-color: aqua;
        }

        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
        }
        .clear{
            clear: both;
        }
    </style>

</head>
<body>
    <div class="father">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="clear"></div>
     </div>
</body>
</html>

案例3-网页布局实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{
            width: 520px;
            height: 520px;
            background-color: aqua;
        }
        .item1{
            width: 260px;
            height: 260px;
            background-color: #d9011b;
            float: left;
        }
        .item2{
            width: 260px;
            height: 260px;
            background-color: #ec808c;
            float: left;
        }
        .item3{
            width: 260px;
            height: 260px;
            background-color: #03bfc0;
            float: left;
        }
        .item4{
            width: 260px;
            height: 260px;
            background-color: #f59a23;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">恭</div>
        <div class="item2">喜</div>
        <div class="item3">发</div>
        <div class="item4">财</div>
    </div>
</body>
</html>

案例4-网页布局实战

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScQGz4m4-1677153239727)(https://woniumd.oss-cn-hangzhou.aliyuncs.com/java/chenyun/案例1.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 消除默认的内外边距 */
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 100%;
            height: 134px;
            background-color: #ff69b4;
            margin-bottom: 14px;
        }
        .menu{
            width: 100%;
            height: 68px;
            background-color: #ff69b4;
            margin-bottom: 14px;
        }
        .main{
            width: 100%;
            height: 270px;
            /* background-color: red; */
            margin-bottom: 14px;
        }
        .footer{
            width: 100%;
            height: 134px;
            background-color: #ff69b4;
        }

        .main .left{
            width: 18%;
            height: 270px;
            background-color: gold;
            float: left;
            margin-right: 2%;
        }

        .main .content{
            width: 60%;
            height: 270px;
            background-color: green;
            float: left;
        }

        .main .right{
            width: 18%;
            height: 270px;
            background-color: blue;
            float: right;
            
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="menu"></div>
    <div class="main">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

案例5-网页布局实战

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mmEJAKCJ-1677153239729)(https://woniumd.oss-cn-hangzhou.aliyuncs.com/java/chenyun/案例2.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .header{
            width: 100%;
            height: 72px;
            background-color: #87ceeb;
        }
        .main{
            width: 1440px;
            height: 600px;
            /* background-color: orange; */
            margin: 18px auto;
            /* 下面的语法会覆盖上面的同名语法 */
            /* margin-top: 18px;
            margin-bottom: 18px; */
            
        }

        .footer{
            width: 1440px;
            height: 72px;
            background-color: #87ceeb;
            margin: 0 auto;
        }

        .main .pic{
            width: 860px;
            height: 600px;
            background-color: #87ceeb;
            float: left;
        }
        .main .news{
            width: 540px;
            height: 600px;
            background-color: #87ceeb;
            float: right;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <div class="pic"></div>
        <div class="news"></div>
    </div>
    <div class="footer"></div>
</body>
</html>