css水平布局与垂直布局

• 水平布局
  盒子模型水平方向的布局
  宽度为父类的全部宽度
  
  水平方向盒子由以下几个自属性构成：
  外边距左 + 边框左 + 内边距左 + 内容 + 内边距右 + 边框右 + 外边距右 = 父类全部宽度
  当上面等式不不足时，则称为：过渡约束。
  默认浏览器会设置margin-right的值，自动补足
  当以上属性其中有值为auto时，浏览器会将该属性的值设置为剩余值
  当有多个auto值时，width为auto时，width会被修改为最大宽度，其它为0。
  如果想盒子居中可以这样设置：

  margin:0 auto;
  

• 垂直布局
  默认情况下父元素的高度被内容撑开
  当父元素的高度设置后，子元素的高度超出父元素的高度时，子元素会溢出父元素的区域
  • overflow 属性可以设置溢出的处理方式
  • overflow-x 处理水平方向的溢出
  • overflow-y 处理垂直方向的溢出
  • 属性值
    visible 默认显示
    hidden 隐藏
    scroll 显示水平与垂直滚动条
    auto 根据需要自动显示滚动条

    overflow: visible