<!doctype html><!--声明文档类型 网页文档-->
<html><!--根目录标签 父级-->
    <head><!--网页的头部 用户看不见的-->
        <meta charset='UTF-8'><!--国际编码 字符的编码格式-->

        <!--网页三要素  title keywords description-->
        <title>咸鱼联盟</title><!--网页的标题-->
        <meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页-->
        <meta name='description' content='这是一个简单的模板文件'><!--网页的描述-->
        <style type="text/css">
            *{    /* 通配符标签 */
                margin: 0;
                padding: 0;
            }
            .box-one{    /* 1和2展示了margin是通过改变位置而改变自身盒子与外部盒子的距离 */
                width: 200px;
                height: 100px;
                background-color: deeppink;
                float: left;
            }
            .box-two{
                width: 200px;
                height: 100px;
                background-color: green;
                overflow: hidden;
            }
            .box-three{   /* 使用margin时会产生外边距合并 即20+40=40 兄弟级*/
                width: 200px;
                height: 100px;
                margin-bottom: 20px;
                background-color: yellow;
            }
            .box-four{
                width: 200px;
                height: 100px;
                margin-top: 40px;
                background-color: purple;
            }
            .box-five{    /* 父子级 */
                width: 200px;
                height: 100px;
                margin-top: 40px;
                /* border-top:20px solid blue; */ 
                /* padding-top: 1px; */
                /*这两个方法都可以解决外边距合并*/
                background-color: red;
            }
            .box-six{
                width: 100px;
                height: 50px;
                margin-top: 20px;
                background-color: deeppink;
            }
            .box-seven{
                width: 200px;
                height: 200px;
                border: 20px solid purple;
                background-color: deeppink;
                padding: 40px;
                margin: 40px;
                /*box-sizing: content-box;  控制盒模型的模式:标准盒模型 */
                box-sizing: border-box;/* 怪异盒模型 做手机的时候用到 */
            }
            .box-eight{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*margin: 50px;*/
                /*margin: auto;  自动居中*/
                margin: 100px auto 0;/* 上外边距 左右外边距 下外边距 */
            }
        </style>
    </head>


    <body><!--网页的身体 用户可视化区域-->
        <div class="box-one"></div>
        <div class="box-two"></div>
        <div class="box-three"></div>
        <div class="box-four"></div>
        <div class="box-five">
            <div class="box-six"></div>
        </div>
        <div class="box-seven"></div>
        <div class="box-eight"></div>
        <!--
            左右不会出现问题   直接相加就可以
            
            为什么会发生外边距合并??
            不同长方形的边界在同一条线上

            外边距合并的触发条件
            <1>兄弟元素在竖直方向有margin时触发
            <2>父子级元素在竖直方向有margin时触发
                必须是在普通文档流的块级元素才会触发外边距合并,这是大前提!!

            外边距的合并规则
            <1>正正取最大值   ===> 50 60 取60
            <2>正负值相加     ===> 50 -60 取-10-vue-router
            <3>负负取最负     ===> -50 -60 取 -60

            外边距合并解决方案
            <1>避免竖直方向元素的外边距相遇
            <2>生成BFC

            父子级解决方案,添加border或者padding  使得两个盒子的边界不在一条直线上
            兄弟级解决方案,直接只设置一个的margin   没有必要触发外边距合并

            怪异盒模型   计算式
            宽度=width
            高度=height
            标准盒模型
            宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right)

            颜色
                英文单词 red green blue...
                十六进制 #ff000
                rgb      rgb(0-255,0-255,0-255)
                    r    red
                    g    green
                    b    blue
                    a    alpha
        -->
    </body>
</html>