html垂直布局入门

垂直布局

使用overflow属性设置父元素如何处理溢出的子元素
可选值：
visible 默认值 文本正常显示
hidden 裁减掉多余的内容
scroll 生成双向的滚动条，可以通过滚动条查看完整的内容
auto 根据实际的内容出现滚动条

overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成
overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成
块元素默认情况下，宽度是父元素内容区的%，高度是被内容撑开的
在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开

外边距的折叠

垂直外边距的重叠
-兄弟元素
如果两个值都是正值，谁大听谁的
如果两个值都是负值，谁小听谁的
如果是一正一负，那最终的值是两者相加
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素
导致父元素的位置发生变化，会影响到父元素下面的布局，所以这个问题必须要解决