盒子模型的布局

前言：

在今天的学习中，接触的盒子模型的布局，接下来让我们看看今天的学习内容

学习内容：

1、垂直布局

2、外边距的折叠

垂直布局：

 使用overflow属性设置父元素如何处理溢出的子元素

          可选值：

            visible 默认值  文本正常显示

            hidden  裁剪掉多余的内容

            scroll  生成双向的滚动条，可以通过滚动条查看完整的内容

            auto    根据实际的内容出现滚动条

         overflow-x  对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成

         overflow-y  对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成

块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开

       在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开

外边距的折叠：

垂直外边距的重叠

    -兄弟元素

      如果两个值都是正值，谁大听谁的

      如果两个值是负值，谁小听谁的（绝对值谁大听谁的）

      如果是一正一负，那最终的值，两者相加  

    -父子元素

    如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,

     导致父元素的位置发生变化，会影响到父元素下面的布局，

      所以这个问题必须要解决

<style type="text/css">

      .box1 {

        width: 100px;

        height: 100px;

        background-color: red;

        margin-bottom: 50px;

      }

      .box2 {

        width: 100px;

        height: 100px;

        background-color: green;

        margin-top: -30px;

      }

      .outer {

        width: 200px;

        height: 200px;

        background-color: yellow;

        /* margin-top: 50px; */

      }

      .inner {

        width: 100px;

        height: 100px;

        background-color: yellowgreen;

        margin-top: 100px;

      }