【CSS盒子模型】水平布局和垂直布局

水平布局

浏览器规定一个元素水平方向的7个值相加必须要等于其父元素内容区的宽度。

如果不等于的话，浏览器就会强制调整这7个值，让你相等。我们管这个过程叫过度约束。 

（1）margin-left；（2）border-left；（3）padding-left；（4）width；（5）padding-right  border-right；（6）margin-right。

调整方法

1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是margin-right。

2、水平方向7个值当中，有三个值可以被设置为auto，width、margin-left、margin-righ。

（1）有1个auto   ,谁是auto就调整谁；

（2）有2个auto （width、margin-left；width、margin-right；margin-left、margin-right ）

（1）width、margin-left  为auto时调整的是width

（2）width、margin-right  为auto时调整的是width

（3）margin-left、margin-right 为auto时，margin-left、margin-right各占一半，把元素挤到中间。

（3）有3个auto  width、margin-left、margin-right都为auto，调整的是width。

3、总结：有auto的话 width>margin-left、margin-right。

 补充

vertical-align: middle;主要是针对图文垂直对齐方式，或者表格垂直对齐方式 。

垂直布局

overflow

overflow可选值：

（1）visible 默认值  正常显示；

（2）hidden 剪裁多余；

（3）auto   自动根据内容显示是否出现滚动条；

（4）scroll  生成双向滚动条。

  补充

（1）块元素的高度默认情况是被内容撑开的，那如果设置，设置多少是多少；

（2）一般情况，我们不给父元素设置固定的高度，让它根据子元素的内容自动调整高度。