布局
/*
元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right =其父元素内容区的宽度（必须满足）
-以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
-调整的情况
-如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right以使等式满足（margin-right相当于一个没有用的元素，就是为了使等式成立的）这七个值中有三个值和设置为auto
width
margin-left
margin-right
-如果某个值为auto，则自动调整为auto的那个值以使等式成立（谁是auto就调整谁，而且width的值默认就是auto）
我们说我们块元素默认的宽度是父元素的百分之百，其实不是百分之百，而是auto，自动设置。
*/
-如果0+1000+0=800 怎么办，这个时候margin-right就会被设置成-200，那么margin-right为负值，就说明什么，说明会突出去，朝相同方向再突出200
-如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
-如果将三个值都设置为auto，则外边距都是0，宽度最大
-如果将两个外边距设置为auto，宽度固定值，则会将我们的外边距设置为相同的值
如 auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
width：xxxpx；
margin：0 auto；
垂直方向的布局
/*
默认父元素的高度被内容撑开,父元素设置了高度是多少就是多少，但是如果没有设置高度的话，就会被内容撑开，内容是多少就多高。
*/
/*
子元素是在父元素的内容区中排列的，
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow 属性来设置父元素如何处理溢出的元素
overflow
可选值：
visible. 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出的内容将会被裁剪不会显示 （一剪没）
scroll 滚 ，生成两个滚动条，通过滚动条来查看完整的内容
auto 根据我们需要生成滚动条
overflow-x：单独处理水平的
overflow-y： 单独处理垂直的
*/
