移动互联 实训DAY08

  • 开发
  • 14

1.浮动布局

浮动流是⼀种"半脱离标准流"的排版⽅式

浮动流只有⼀种排版⽅式, 就是⽔平排版. 它只能设置某个元素左对⻬或者右对⻬

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
            /* 切换为一个行内块级元素 */
            /* display: inline-block; */
            /* 浮动布局 */
            /* float: left; */
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: gold;
            /* display: inline-block; */
            /* 浮动布局 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>

</body>
</html>

2. 浮动字围现象

浮动元素不会挡住没有浮动元素中的⽂字, 没有浮动的⽂字会⾃动给 浮动的元素让位置,这个就是浮动元素字围现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 150px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 图片 -->
        <img src="https://bkimg.cdn.bcebos.com/pic/bf096b63f6246b600c3374b0d7af0d4c510fd8f904e5?x-bce-process=image/format,f_auto/resize,m_lfit,limit_1,h_300" alt="">
        <!-- 文字描述 -->
        <p>
            金珍妮（김제니、Jennie Kim），1996年1月16日出生于韩国首尔特别市江南区清潭洞 [1] [99]，韩国女歌手，
            女子演唱组合BLACKPINK成员 [2] [101]。
2016年8月8日，以BLACKPINK成员身份正式出道 [3]，并随组合发行首张单曲专辑《SQUARE ONE》 [4]；11月1日，随组合发行
第二张单曲专辑《SQUARE TWO》 [5]。2018年7月24日起，随组合举行出道后首场的日本竞技场巡回演唱会“BLACKPINK Arena 
Tour 2018” [7]；11月12日，发行个人单曲《SOLO》 [8]，该歌曲在国际上荣登Billboard世界数字歌曲销售榜首位，并登顶
40国iTunes榜单，她也因此成为首位登顶iTunes全球歌曲榜的韩国女歌手 [52-54]；12月16日，凭借《SOLO》获SBS人气歌谣
一位 [89]。2019年4月5日，随组合发行迷你专辑《KILL THIS LOVE》 [9]；10月16日，随组合发行迷你专辑《Kill This L
ove》的日语版 [69]。2020年5月28日，随组合发行与Lady Gaga的合作单曲《Sour Candy》 [11]；8月28日，随组合发行与S
elena Gomez的合作单曲《Ice Cream》 [76]；10月2日，随组合发行首张正式专辑《THE ALBUM》 [13]。2023年10月6日，发
行个人单曲《You & Me》 [63]；12月，成立个人经纪公司ODD ATELIER，正式启动个人活动
        </p>
    </div>
</body>
</html>

3.高度塌陷问题

⾼度塌陷：在⽂档流中，⽗元素的⾼度默认是被⼦元素撑开的，也就是⼦元素多⾼,⽗元素就多⾼。 但是当为⼦元素设置浮动以后,⼦元素会完全脱离⽂档流，此时将会导致⼦元素⽆法撑起⽗元素的⾼度，导致⽗元素的⾼度塌陷。由于⽗元素的⾼度塌陷了，则⽗元素下的所有元素都会向上移动,这样将会导致⻚⾯布局混乱。

解决⾼度塌陷：1.所以在开发中⼀定要避免出现⾼度塌陷的问题,我们可以将⽗元素的⾼度写死，以避免塌陷的问题出现，但是⼀旦⾼度写死，⽗元素的⾼度将不能⾃动适应⼦元素的⾼度，所以这种⽅案是不推荐使⽤的。 2.可以直接在⾼度塌陷的⽗元素的最后，添加⼀个空⽩的div，由于这个div并没有浮动，所以他是可以撑开⽗元素的⾼度的，然后在对其进⾏ 清除浮动，这样可以通过这个空⽩的div来撑开⽗元素的⾼度，基本没有副作用。使⽤这种⽅式虽然可以解决问题，但是会在⻚⾯中添加多余的结构。3.通过after伪类,可以通过after伪类向元素的最后添加⼀个空⽩的块元素，然后对其清除浮动，这样做和添加⼀个div的原理⼀样，可以达到⼀个相同的效 果，⽽且不会在⻚⾯中添加多余的div，这是我们最推荐使⽤的⽅式，⼏乎没有副作⽤。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 700px;
            /* height: 200px; */
            border: 5px solid red;
        }
        /* 解决父元素的高度塌陷问题 */
        .father::after{
            /* 空白的元素 */
            content: '';
            /* 切换块级元素 */
            display: block;
            /* 清除浮动 */
            clear: both;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <!-- 撑起父元素的高度 -->
        <!-- <div style="clear: both;"></div> -->
    </div>
</body>
</html>

 4.两列布局

两列布局：左边定宽，右边⾃适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            width: 300px;
            background-color: rebeccapurple;
            float: left;
        }
        .right{
            overflow: auto;
            background-color: rgb(215, 218, 28);
        }
    </style>
</head>
<body>
    <div class="left">左边的布局</div>
    <div class="right">右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局
        右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局
        右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局右边的布局
    </div>
</body>
</html>

5.bfc解决高度塌陷问题

BFC是⼀个独⽴的布局环境，BFC内部的元素布局与外部互不影响

BFC的布局规则:1. 内部的Box会在垂直⽅向⼀个接着⼀个地放置。 2. Box垂直⽅向上的距离由margin决定。属于同⼀个BFC的两个相邻的 Box的margin会发⽣重叠。 3. 每个盒⼦的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。 4. BFC的区域不会与float box重叠。 5. BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响 到外⾯的元素，反之亦然。 6. 计算BFC的⾼度时，浮动⼦元素也参与计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 700px;
            /* height: 200px; */
            border: 5px solid red;
            /* bfc解决高度塌陷问题 */
            overflow: auto;
        }
        /* 解决父元素的高度塌陷问题 */
        /* .father::after{ */
            /* 空白的元素 */
            /* content: ''; */
            /* 切换块级元素 */
            /* display: block; */
            /* 清除浮动 */
            /* clear: both; */
        /* } */
        .son{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <!-- 撑起父元素的高度 -->
        <!-- <div style="clear: both;"></div> -->
    </div>
</body>
</html>

6.九宫格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父容器的样式 */
        .container{
            width: 600px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
        }
        /* 子元素样式 */
        .container div{
            width: 33%;
            height: 33%;
            border: 1px solid rgb(5, 88, 160);
            background-color: #e76422;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 搭建页面结构 -->
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

 7.浮动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚所有标签自带的样式 */
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 父容器 */
        .container{
            width: 1400px;
            height: 1000px;
            background-color: #e3b0b0;
            margin: 0 auto;
        }
        /* 顶部展示区 */
        .container .header{
            width: 100%;
            height: 100px;
            background-color: blueviolet;
        }
        .header ul{
            float: right;
        }
        /* 导航栏子元素的样式 */
        ul li{
            float: left;
            width: 80px;
            background-color: #d28c24;
            text-align: center;
            margin-left: 10px;
            line-height: 50px;
        }
        /* 内容 */
        .container .content{
            width: 100%;
            height: 800px;
            background-color: rgb(47, 192, 74);
        }
        /* 左边区域的样式 */
        .content .contentLeft{
            width: 500px;
            height: 780px;
            background-color: #c947ad;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }
        /* 右边区域的样式 */
        .content .contentRight{
            width: 870px;
            height: 780px;
            background-color: #1f27ca;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }
        /* 右边区域中子元素样式 */
        .contentRight div{
            width: 280px;
            height: 385px;
            background-color: #7fa8a7c3;
            float: left;
            /* margin-top: 10px; */
            margin-right: 10px;
        }
        .contentRight div:nth-child(n+4){
            margin-top: 10px;
        }
        /* 底部 */
        .container .footer{
            width: 100%;
            height: 100px;
            background-color: rgb(226, 43, 43);
        }


        /* 内容 */
        .container .content1{
            width: 100%;
            height: 800px;
            background-color: rgb(47, 192, 74);
            border: 1px solid rgb(47, 192, 74);
        }
        /* 内容上 */
        .content1 .contentTop{
            width: 1380px;
            height: 390px;
            background-color: #c947ad;
            margin-left: 10px;
            margin-top: 10px;
            
        }
        /* 内容下 */
        .contentBottom div{
            width: 337px;
            height: 390px;
            float: left;
            background-color: #4521ca;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="container">
        <!-- 顶部展示区 -->
        <div class="header">
            <!-- 导航栏 -->
            <ul>
                <li>首页</li>
                <li>食品</li>
                <li>服装</li>
                <li>运动</li>
                <li>关于</li>
                <li>我的</li>
            </ul>
        </div>
        <!-- 内容展示区域 -->
        <div class="content">
            <!-- 左边区域 -->
            <div class="contentLeft"></div>
            <!-- 右边区域 -->
            <div class="contentRight">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="footer">

        </div>

        <!-- 父容器 -->
    <div class="container">
        <!-- 顶部展示区 -->
        <div class="header">
            <!-- 导航栏 -->
            <ul>
                <li>首页</li>
                <li>食品</li>
                <li>服装</li>
                <li>运动</li>
                <li>关于</li>
                <li>我的</li>
            </ul>
        </div>
        <!-- 内容展示区域 -->
        <div class="content1">
            <!-- 上边区域 -->
            <div class="contentTop"></div>
            <!-- 下边区域 -->
            <div class="contentBottom">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="footer">

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

 

 

阅读全部

相关推荐

  9. 网络安全实训Day12

    2024-07-15 02:20:02       36 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 02:20:02       67 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 02:20:02       71 阅读

  9. 在Django里面运行非项目文件

    2024-07-15 02:20:02       58 阅读

  19. Python语言-面向对象

    2024-07-15 02:20:02       69 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-15 02:20:02       64 阅读

热门阅读

  4. C++ 入门10：继承和派生类

    2024-07-15 02:20:02       16 阅读
  7. IDC脚本

    IDC脚本

    2024-07-15 02:20:02      18 阅读

  10. 精通Python数据可视化：Matplotlib柱状图、直方图与饼状图实战解析

    2024-07-15 02:20:02       25 阅读

  12. 注册sublime text右键打开

    2024-07-15 02:20:02       22 阅读

  14. 软考高级第四版备考--第18天（识别风险）Identify Risk

    2024-07-15 02:20:02       17 阅读

  16. LC53最大子数组和、lc5最长回文子串、lc283移动零

    2024-07-15 02:20:02       23 阅读

  18. Vue3 defineProps的使用

    2024-07-15 02:20:02       20 阅读

  25. 数据结构第26节 广度优先搜索

    2024-07-15 02:20:02       18 阅读

  27. 共享云硬盘并发读写之集群文件系统

    2024-07-15 02:20:02       24 阅读