前端水平和垂直布局

水平布局：

• 元素在其父元素里的位置由以下几个属性决定：

  margin-left

  border-right

  padding-left

  width

  padding-right

  border-right

  margin-right

• 水平布局时必须满足上述7个值之和等于父元素的content，！必须满足。

如果出现不满足的情况，浏览器会自动调整：

• 七个值中没有auto时，调整margin-right的值
• 如果width为auto，则调整width，无论其他值是不是auto（其他值调整为0）
• 如果width不是auto，margin-left和margin-right为auto，则平分

•         .box{
              /* content */
              width: 700px;
              height: 100px;
              border: red 10px solid;
          }
          .box1{
              width: auto;
              height: 100px;
              margin-right: 300px;
              margin-left: 300px;
              background-color: purple;
  
          }

  ---

  垂直布局：

• 默认情况下由内容撑开，没有内容时height为0，不显示
• 根据height的值，height是多少就是多少
• 当子元素的height大于父元素的height时，出现溢出
• 溢出处理，通过父元素的overflow属性：

  visible	默认，可见
  hidden	隐藏
  scroll	水平和垂直滚动条
  auto	自动生成滚动条

• overflow-x单独处理水平方向溢出，overflow-y单独处理垂直方向

垂直外边距重叠：

• 兄弟元素之间相邻外边距即一下一上，和外边距为：

  两个正值	取较大一个
  一正一负	相加
  两个负值	取绝对值较大一个

• 子元素和父元素之间如果上外边距重合，则修改子元素的外边距会让父元素整个下移动，解决办法：1.修改父元素的内边距 2.用父元素的border-top使得父子元素的上边距隔开。