day54 浮动流 字围 塌陷流

其他 2020-10-29 11:57:05 阅读次数: 0

1.温故知新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1111 {
     
     
            width: 200px;
            height: 200px;
            /*background-color: rgba(255,0,0,0.3);*/
            background-color: white;
            /*opacity: 0.3;*/
            box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
        }
        .son {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="son"></div>
</div>
</body>
</html>

2.标准流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: gray;
        }
        .box3 {
     
     
            background-color: blue;
        }
        .box4 {
     
     
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">111</div>
<span class="box3">2222</span>
<span class="box3">3333</span>
</body>
</html>

3.浮动流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    浮动流是一种半脱离文档流的布局方式
    1、什么是脱离文档流
        不再受块级or行内标签的限制，都可以设置widht和height
        垂直方向上的盒子会向上占据浮动起来的盒子原先的位置，形成一个遮蔽的效果
    2、什么是半脱离？
        之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，
        跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，
        那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，
        打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，
        他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：
        同一方向上左浮动找前一个左浮动贴靠,右浮动找前一个右浮动贴靠
    -->
    <style>
        span {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin: 0 auto;
        }
        .box1 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<span>11111</span>
<div class="box1"></div>
</body>
</html>

4.浮动流示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

4.浮动流示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }
        .box3 {
     
     
            width: 400px;
            height: 400px;
            background-color: gray;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

5.浮动流示例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box1 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            /*float: left;*/

        }
        .box2 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
            /*float: left;*/
        }
        .box3 {
     
     
            width: 400px;
            height: 400px;
            background-color: gray;
            /*float: right;*/
        }
        .box4 {
     
     
            width: 500px;
            height: 500px;
            background-color: pink;
            /*float: right;*/
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

6.浮动元素贴靠问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
     
     
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
     
     
            width: 1000px;
            height: 800px;
            border: 1px dotted black;
        }

        .son1 {
     
     
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

         .son2 {
     
     
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .son3 {
     
     
            width: 300px;
            height: 300px;
            background-color: gray;
            float: left;
        }
        .son4 {
     
     
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
    <div class="son4"></div>
</div>

</body>
</html>

7.字围现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
     
     
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
    111111
    111111
    111111
    111111
    111111
    111111
    111111
    111111
    111111
</div>
</body>
</html>

8.字围现象1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
     
     
            float: left;
        }
    </style>
</head>
<body>

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526318630409&di=8186a1ab56ed36696ade3e23a228acfc&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F58be1c554d5f0.jpg" alt="" width="200px">

<p>
    迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员。2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。2014年，她主演了奇幻剧《逆光之恋》。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖。2016年，其主演的现代剧《麻辣变形计》播出；同年，她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖。2017年，迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名。2018年 ...
    迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员 [1]  。
2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道 [2]  。2014年，她主演了奇幻剧《逆光之恋》 [3]  。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖 [4]  。2016年，其主演的现代剧《麻辣变形计》播出 [5]  ；同年，她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖 [6]  。2017年，迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名 [7]  。2018年4月20日，主演的爱情喜剧电影《21克拉》上映 [8]  。
    迪丽热巴出生于新疆乌鲁木齐市，父亲是新疆歌舞团的独唱演员。因受父亲影响，迪丽热巴从小便对各种艺术类的东西颇感兴趣，并主动要求学习钢琴、舞蹈、小提琴、吉他等 [9]  。
2001年，9岁的迪丽热巴被父亲带去一所艺术学院参加考试，当时她以为是上兴趣班，结果被录取后才发现是一个专业的舞蹈院校，而迪丽热巴也开始了为期六年的民族舞、芭蕾舞专业学习。2007年，从艺术学院毕业的迪丽热巴成为了新疆歌舞团的舞蹈演员 [10]  。2009年，迪丽热巴还在东北师范大学民族学院读了一年预科，在此期间她还参加了吉林省的首届少数民族新歌大赛，并最终获得了省级三等奖的成绩 [11]  。
之后，迪丽热巴却慢慢发现这并不是自己想要的生活。于是决定继续求学，去看看外面的世界，因为有不错钢琴基础，所以本来想报考的是中央音乐学院，可报名时却看到了中戏和上戏在招生，便突然决定改学表演。而迪丽热巴会有这样的决定则是受到了她钢琴老师的指点。2010年，迪丽热巴顺利考入了上海戏剧学院表演系戏剧影视专业；同年，她参加了陆川执导的古装片《王的盛宴》女主角“虞姬”的上海站海选 [12]  ，并因此获得了颇多关注 [13]  。
</p>
</body>
</html>

9.字围现象2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!--
不仅仅是文字会包围浮动元素，inline-block元素也会包围浮动元素
-->
    <style>
        .box1 {
     
     
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .box2 {
     
     
            width: 10px;
            height: 10px;
            background-color: blue;
            border: 1px dotted black;
            display: inline-block;
        }
        .box3 {
     
     
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

10.布局案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        body {
     
     
            background-color: #cccccc;
        }

        .header {
     
     
            width: 960px;
            height: 100px;
            background-color: red;
            margin: auto;
            padding: 20px;
            box-sizing: border-box;
        }

        .logo {
     
     
            width: 300px;
            height: 60px;
            background-color: pink;
            float: left;
        }

        .nav {
     
     
            width: 600px;
            height: 60px;
            background-color: yellow;
            float: right;
        }

        .content {
     
     
            width: 960px;
            height: 800px;
            background-color: green;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 20px;
            box-sizing: border-box;
        }

        .aside {
     
     
            width: 300px;
            height: 760px;
            background-color: pink;
            float: left;
        }

        .article {
     
     
            width: 600px;
            height: 760px;
            background-color: yellow;
            float: right;
        }
        .footer {
     
     
            width: 960px;
            height: 100px;
            margin: auto;
            background-color: blue;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }
        html {
     
     
            height: 100%;
        }
        body {
     
     
            height: 100%;
            background-color: #cccccc;
        }

        .header {
     
     
            width: 80%;
            height: 10%;
            background-color: red;
            margin: auto;
            padding: 20px;
            box-sizing: border-box;
        }

        .logo {
     
     
            width: 20%;
            height: 100%;
            background-color: pink;
            float: left;
        }

        .nav {
     
     
            width: 70%;
            height: 100%;
            background-color: yellow;
            /*float: right;*/
            display: inline-block;
            /*margin-left: 30px;*/
        }

        .content {
     
     
            width: 80%;
            height: 78%;
            background-color: green;
            margin: auto;
            margin-top: 1%;
            margin-bottom: 1%;
            padding: 20px;
            box-sizing: border-box;
        }

        .aside {
     
     
            width: 20%;
            height: 100%;
            background-color: pink;
            float: left;
        }

        .article {
     
     
            width: 70%;
            height: 100%;
            background-color: yellow;
            float: right;
        }
        .footer {
     
     
            width: 80%;
            height: 10%;
            margin: auto;
            background-color: blue;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动流排版练习3</title>

    <style>
        * {
     
     
            margin: 0px;
            padding: 0px;
        }
        .header {
     
     
            height: 100px;
            width: 980px;
            background-color: #f6c2d2;
            margin: 0 auto;
        }




        .content {
     
     
            height: 400px;
            width: 980px;
            background-color: #fefefe;
            margin: 0 auto;

            margin-top: 10px;
        }
        .content .aside {
     
     
            width: 320px;
            height: 400px;
            background-color: #fcfd00;
            float: left;
        }

        .content .article {
     
     
            width: 650px;
            height: 400px;
            background-color: #fefefe;
            float: right;
        }

        .content .articleTop {
     
     
            width: 650px;
            height: 350px;
            background-color: #fefefe;
        }
        .content .articleTopLeft {
     
     
            width: 400px;
            height: 350px;
            background-color: #fefefe;
            float: left;
        }
        .content .articleTopLeft .new1 {
     
     
            width: 400px;
            height: 200px;
            background-color: #e9289c;
        }
        .content .articleTopLeft .new2 {
     
     
            width: 400px;
            height: 140px;
            background-color: #3dd1fd;

            margin-top: 10px;
        }




        .content .articleTopRight {
     
     
            width: 240px;
            height: 350px;
            background-color: #acde3d;
            float: right;
        }


        .content .articleBottom {
     
     
            width: 650px;
            height: 40px;
            background-color: #b9950c;
            margin-top: 10px;
        }

        .footer {
     
     
            height: 40px;
            width: 980px;
            background-color: #ec6357;
            margin: 0 auto;

            margin-top: 10px;
        }




    </style>
</head>
<body>


<div class="header"></div>
<div class="content">
    <div class="aside"></div>
    <div class="article">
        <div class="articleTop">
            <div class="articleTopLeft">
                <div class="new1"></div>
                <div class="new2"></div>
            </div>
            <div class="articleTopRight"></div>

        </div>
        <div class="articleBottom"></div>

    </div>
</div>
<div class="footer"></div>



</body>
</html>

示范三

11.父集塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
     
     
            border: 1px solid black;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box3 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给爸爸加一个高度</title>
    <style>
        .box1 {
     
     
            border: 1px solid black;
            height: 200px;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box3 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear:both</title>
    <style>
        .box1 {
     
     
            border: 1px solid black;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box3 {
     
     
            /*margin-top属性不好用*/
            margin-top: 100px;
            clear: both;
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外墙法</title>
    <style>
        .box1 {
     
     
            border: 1px solid black;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box3 {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .wall {
     
     
            clear: both;
            height: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="wall"></div>
<div class="box3"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内墙法</title>
    <style>
        .box1 {
     
     
            border: 1px solid black;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box3 {
     
     
            margin-top: 10px;
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .wall {
     
     
            clear: both;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
    <div class="wall"></div>
</div>
<div class="box3"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内墙法+伪元素</title>
    <style>
        .box1 {
     
     
            border: 1px solid black;
        }
        .box2 {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box3 {
     
     
            /*margin-top: 10px;*/
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .clearfix {
     
     
            *zoom:1
        }
        .clearfix:before,.clearfix:after {
     
     
            content: "";
            display: table;
        }
        .clearfix:after {
     
     
            clear: both;
        }

    </style>
</head>
<body>
<div class="box1 clearfix">
    <div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

12.margin-top

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box3 {
     
     
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .father {
     
     
            width: 300px;
            height: 300px;
            background-color: green;
            /*border: 0.1px solid black;*/
        }
        .father:before {
     
     
            content: "";
            display: table;
        }
        .son {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
        }


    </style>
</head>
<body>
<div class="box3"></div>

<div class="father">
    <div class="son"></div>
</div>


</body>
</html>

猜你喜欢

转载自blog.csdn.net/yinlingjishu/article/details/108722109
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022