Day06

1、警示框

html 的内容

    <!-- 第一个警示框 -->
    <div class="wp">
        <h3 class="tit">Adobe Photoshop CS4 Extended</h3>
        <p class="cont1">要在关闭之前存储对 Adobe Photoshop文档“未标题-1”的更改?</p>
    </div>
    <div style="height: 44px;"></div>
    <!-- 第二个警示框 -->
    <div class="wp1">
        <h3 class="tit1">Adobe Photoshop CS4 Extended</h3>
        <p class="cont2">要在关闭之前存储对 Adobe Photoshop文档“未标题-1”的更改?</p>
    </div>
    <div style="height: 44px;"></div>
    <!-- 第三个警示框 -->
    <div class="wp2">
        <h3 class="tit2">Adobe Photoshop CS4 Extended</h3>
        <p class="cont3">要在关闭之前存储对 Adobe Photoshop文档“未标题-1”的更改?</p>
    </div>

css 的内容

    /* 重置全局样式
    作用是 把全局所有标签的内边距和外边距都重置为0，这样在使用的时候就不会被默认样式影响 */
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #a4dae8;
    }
    /* 警示框1 */
    .wp {
        background-color: #eb346c;
        padding: 0px 24px 24px;
        width: 452px;
        /* height: 191px; */
    }
    .tit {
        height: 50px;
        line-height: 50px;
        color: #fff;
        background: url(/Day01/作业/img/img1/gray-logo.png) no-repeat left center;
        padding-left: 42px;
    }
    .cont1 {
        background: #e3778f url(/Day01/作业/img/img1/gray-warning.png) no-repeat 48px 25px ;
        width: 281px;
        height: 85px;
        padding: 34px 51px 0px 120px ;
        color: #fff;
        /* border:1px #ff0  solid; */
        font-size: 15px;
        line-height: 25px;
    }

    .tit1 {
        background: #fae5e8 url(/Day01/作业/img/img1/pink-logo.png) no-repeat 23px 14px;
        width: 436px;
        height: 50px;
        line-height: 50px;
        border:2px #db5573 solid;
        color: #d95479;
        padding-left: 64px;
    }
    .cont2 {
        background:#fff url(/Day01/作业/img/img1/pink-warning.png) no-repeat 53px 22px ;
        padding: 34px 51px 0px 120px;
        width: 329px;
        height: 76px;
        border:2px #db5573 solid;
        color: #d95479;
        border-top: none;
        font-size: 15px;
    }
    .wp2 {
        background-color: #fff;
        padding: 0px 24px 24px;
        width: 456px;
    }
    .tit2 {
        background: url(/Day01/作业/img/img1/red-logo.png) no-repeat left center;
        height: 50px;
        line-height: 50px;
        padding-left: 42px;
        color:#939393;
    }
    .cont3 {
        background:#fff url(/Day01/作业/img/img1/gray-warning.png) no-repeat 33px 22px ;
        padding: 34px 51px 0px 120px;
        width: 285px;
        height: 60px;
        /* border:2px #db5573 solid; */
        color: #0d0d0d;
        border-top: 2px #939393 solid;
        font-size: 15px;
    }

02、盒模型

margin 设置边距

            margin-top 设置元素上边的外边距

            margin-right 设置元素右边的外边距

            margin-bottom 设置元素下边的外边距

            margin-left 设置元素左边的外边距

        合写

            margin：上 右 下 左；

            上 = 下 右 ！= 左

            margin：上 右 ；

             上 = 下 右 = 左

             

             上 = 下 = 右 = 左

             margin：上；

        margin的经典bug

        1.上下两个兄弟元素的margin重叠问题

            上下两个兄弟标签，设置margin的时候，他们的之间的距离不是相加而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的

            可以理解为，上面元素的margin-bottom和下面元素的margin-top他们的值谁大取谁

            解决方法：给下面的元素添加 display：inline-block

        2.父子级子元素的margin-top 转递问题

            在子元素中设置margin-top，表现的结果是该 margin-top传递到了父级元素上，使得父元素距离他上面的元素为该margin-top值

            解决方法：

                a.给父元素添加 overflow：hidden；

                b.给父元素添加 border