css网页布局

一.网页布局方式

#1、什么是网页布局方式
布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等

而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的

#2.网页布局/排版的三种方式
>标准流
>浮动流
>定位流

二.标准流

标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列

#1.浏览器默认的排版方式就是标准流排版方式
#2在css中将元素分为三类:分别是
	块级
	行内
	行内块级
#3.在标准流中有两种排版方式,一种是垂直排版,一种是水平排版
	垂直排版,如果是块级元素,那么就会垂直排版
	水平排版,如果元素是行内元素或行内块级元素,那么就会水平排版

代码示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
        .box3 {
            background-color: pink;
        }
        .box4 {
            background-color: indianred;
        }
    </style>
</head>
<body>
<div class="box1">111</div>
<div class="box2">111</div>
<span class="box3">222</span>
<span class="box4">333</span>
</body>
</html>

三.浮动流

1.什么是浮动流

浮动流是一种半脱离标准流的排版方式,那什么是脱离文档流?什么又是半脱离文档流?

1.1 什么是脱离文档流?

1.浮动元素脱离文档流意味着
#1.不再区分行内,块级,行内块级,无论是什么级的元素都可以水平排版
#2.无论是什么级的元素都可以设置宽高
综上所述,浮动流中的元素和标准流总的行内块级元素很像

浮动流示例1

<!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>

2.浮动元素脱标文档流意味着
#1.当某一个元素浮动走之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标
#2、如果前面一个元素浮动走了,而后面一个元素没有浮动,那么垂直方向的元素会自动填充,浮动元素重新归位后就会覆盖该元素

浮动流示例2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

浮动流示例3

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

浮动流示例4

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

2.浮动元素的贴靠问题

当父元素的宽度足够显示所有元素时,浮动的元素就会并列显示
当父元素的宽度不足够显示所有元素时,浮动的元素就贴前一个元素,如果还不够,就会再贴前一个元素
直到贴到父元素左边,此时无论是否宽度足够都会在这一行显示了

代码演示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

3.浮动元素字围现象

没有浮动文字、图片、超链接等元素会给浮动的元素让位置,并围绕在浮动元素的周围

代码演示字围现象

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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">
    1111111111
    11111111
    1111111
    111111111
    11111111
    1111111111
    1111111111111111111111111111111
    111111111111111111111
    11111111111111111111111111
    111111111111111111111
    111111111111111111111111
    111111
    111111
    111111
</div>
</body>
</html>

字围现象案例(图文混排)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
<img src="https://bkimg.cdn.bcebos.com/pic/bba1cd11728b4710b1db755fc1cec3fdfd0323a8?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5" alt="" width="100px">
<p>
    嵇(jī)康(224年-263年,一作223年-262年),字叔夜,谯国铚县(今安徽省濉溪县临涣镇)人 [1]  。三国时期曹魏思想家、音乐家、文学家,治书侍御史嵇昭之子。
嵇康自幼聪颖,身长七尺八寸,容止出众,他博览群书,广习诸艺,尤为喜爱老庄学说。早年迎娶魏武帝曹操曾孙女长乐亭主为妻 [2]  ,拜官郎中,授中散大夫,世称“嵇中散”。
    司马氏掌权后,隐居不仕,拒绝出仕。景元四年(263年),因受司隶校尉钟会构陷,而遭掌权的大将军司马昭处死,时年四十岁。
嵇康与阮籍等人共倡玄学新风,主张“越名教而任自然”、“审贵贱而通物情” [3]  ,成为“竹林七贤”的精神领袖,名列“竹林名士”之一 [4]  。
    他的事迹与遭遇对于后世的时代风气与价值取向有着巨大影响。嵇康工诗善文,其作品风格清峻,反映出时代思想,并且给后世思想界、文学界带来许多启发。又注重养生,曾著《养生论》。今有《嵇康集》传世。
    嵇康生于魏文帝黄初五年(224年),一作黄初四年(223年)。其祖先本姓奚,住在会稽上虞(今浙江省绍兴市上虞区),其曾祖父后为躲避仇家,迁徙到谯国的铚县(今安徽省濉溪县临涣镇),并改姓为嵇。 [6]
    嵇康的父亲嵇昭,官至治书侍御史。嵇康的兄长嵇喜,早年即以秀才身份从军,后历任太仆、扬州刺史、宗正等职。 [7]  [8]
    嵇康通晓音律,尤爱弹琴,著有音乐理论著作《琴赋》《声无哀乐论》。他主张声音的本质是“和”,合于天地是音乐的最高境界,认为喜怒哀乐从本质上讲并不是音乐的感情而是人的情感。
嵇康作有《风入松》,相传《孤馆遇神》亦为嵇康所作。作有《长清》《短清》《长侧》《短侧》四首琴曲,被称作“嵇氏四弄”,与蔡邕的“蔡氏五弄”合称“九弄”。隋炀帝曾将弹奏“九弄”作为取仕条件。
    嵇康继承了老庄的养生思想,进行实践颇有心得,他的《养生论》是中国养生学史上第一篇较全面、较系统的养生专论。后世养生大家如陶弘景、孙思邈等对他的养生思想都有借鉴。 [27]
《嵇康集》中,篇篇含养生之理,提出“越名教而任自然”的养生看法。 [27]
魏晋之时,养生之学大兴,但当时有两种相对立的思想存在:一是认为修道可成仙,长生不老;二是认为“生死全由天,半分不由人。”嵇康针对这种现象,指出神仙不可能,如果导养得理,则安期、彭祖之论可及的看法。
</p>
</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>
<!--
不仅仅是文字会包围浮动元素,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.box2*30
<div class="box3"></div>
</body>
</html>

4.浮动流排版练习

#注意:在企业开发中,如何对网页进行布局
#1、垂直方向的布局用标准流布局,水平方向用浮动流布局
#2、从上至下布局
#3、从外向内布局
#4、水平方向可以先划分为一左一右再对左边后者右边进一步布局

浮动排版案例1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #cccccc;
        }
        .header {
            width: 960px;
            height: 100px;
            background-color: #fab0aa;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .logo {
            width: 300px;
            height: 60px;
            background-color: indianred;
            float: left;
        }
        .nav {
            width: 600px;
            height: 60px;
            background-color: palevioletred;
            float: right;
        }
        .content {
            width: 960px;
            height: 800px;
            background-color: cadetblue ;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 20px;
            box-sizing: border-box;
        }
        .aside {
            width: 300px;
            height: 760px;
            background-color: thistle;
            float: left;
        }
        .article {
            width: 600px;
            height: 760px;
            background-color:papayawhip ;
            float: right;
        }
        .footer {
            width: 960px;
            height: 100px;
            background-color: tomato;
            margin: auto;
        }
    </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>

浮动排版案例2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
            background-color: #cccccc;
        }
        .header {
            width: 80%;
            height: 10%;
            background-color: #fab0aa;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .logo {
            width: 20%;
            height: 100%;
            background-color: indianred;
            float: left;
        }
        .nav {
            width: 70%;
            height: 100%;
            background-color: palevioletred;
            float: right;
        }
        .content {
            width: 80%;
            height: 78%;
            background-color: cadetblue ;
            margin: auto;
            margin-top: 1%;
            margin-bottom: 1%;
            padding: 20px;
            box-sizing: border-box;
        }
        .aside {
            width: 20%;
            height: 100%;
            background-color: thistle;
            float: left;
        }
        .article {
            width: 70%;
            height: 100%;
            background-color:papayawhip ;
            float: right;
        }
        .footer {
            width: 80%;
            height: 10%;
            background-color: tomato;
            margin: auto;
        }
    </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>

浮动排版案例3

<!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>

5.父级塌陷问题

浮动元素高度问题,又称父级塌陷

#1、在标准流中,内容的高度可以撑起父元素的高度
#2、在浮动流中,浮动的元素是不可以撑起父元素的高度的,当子元素都浮动起来后,父亲的内容高度即height变为0,父元素就好像塌陷了一样,因而又称为父级塌陷

代码演示父级塌陷问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>

父级塌陷:解决方案1

清除浮动方式一:
为浮动的那些子元素的父亲设置一个高度

#1、注意点:
在企业开发中,这样限定固定高度会使页面操作不灵活,不推荐!

<!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>

父级塌陷:解决方案2

清除浮动方式二:
clear : none | left | right | both
注意:clear这个属性必须设置在块级、并且不浮动的元素中

#1、取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许左右有浮动对象

#2、把握住两点:
1、元素是从上到下、从左到右依次加载的。
2、clear: left;对自身起作用,而不会影响其他元素。一旦左边有浮动元素,即切换到下一行来保证左边元素不是浮动的,依据这一点解决父级塌陷问题。

#注意:
这种方式的弊端是:当我们给某个元素添加clear属性之后,那么这个属性的margin-top属性可能会失效,因而也不推荐直接用clear

<!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>

父级塌陷:解决方案3

#1、外墙法
2.1 在两个盒子中间添加一个额外的块级元素
2.2 给这个额外添加的块级元素设置clear:both;属性
注意:
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性,所以我们通常用墙的高度作margin的替代品

在企业开发中可以为墙添加一个类h20,然后设置h20的高度为20实现外间距,搜狐网站大量使用了外墙法

<!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>

父级塌陷:解决方案4

#2、内墙法
3.1 在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2 给这个额外添加的块级元素设置clear:both;属性
注意:
内墙法它可以让第二个盒子使用margin-top属性
内墙法可以让第一个盒子使用margin-bottom属性
内墙法也可以为墙添加一个类h20,然后设置h20的高度为20实现外间距,搜狐网站大量使用了外墙法

<!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;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
    <div class="wall"></div>
</div>
<div class="box3"></div>
</body>
</html>

#3、内墙法与外墙法的区别?
1、外墙法不可以撑起第一个盒子的高度,而内墙可以
2、在企业开发中清除浮动,内墙法与外墙法都不常用,因为添加一个无用的墙
在前端开发中推崇结构与样式分离,而隔墙法需要添加大量的没有意义的空标签div

父级塌陷:解决方案5

本质原理与内墙法一样,但我们用的css的伪元素选择器实现的,就应该用css来控制样式,符合前端开发思想
            #I、详细用法
            .header:after {             <----在类名为“clearfix”的元素内最后面加入内容;
            content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。
            display: block;               <----加入的这个元素转换为块级元素。
            clear: both;                  <----清除左右两边浮动。
            visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。
                                               visibility:hidden;仍然占据空间,只是看不到而已;
            line-height: 0;               <----行高为0;
            height: 0;                    <----高度为0;
            font-size:0;                  <----字体大小为0;
            }
            
            .header { *zoom:1;}         <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效,其余没用
            
            
            整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。
            之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。
            <div class="header"></div>


            #II、必须要写的是下面这三句话
            content: '.';
            display: block;
            clear: both;

            
            #III、新浪首页清除浮动的方法,也是采用伪元素
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

#1、复习伪元素选择器(CSS3中新增的为元素选择器)
    伪元素选择器的作用就是给指定标签的内容前面添加一个子元素
    或者给指定标签的内容后面添加一个子元素


#2、格式:给指定标签的前面和后面添加子元素
    标签名称::before{
        属性名称:值;
    }

    标签名称::after{
        属性名称:值;
    }
#通用写法
.clearfix {
    *zoom:1
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}
<!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>

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>

参考博客1

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页