1. 水平布局
子元素在其父元素中水平方向的位置由以下几个属性共同决定：
水平方向的七个值相加必须等于其父元素内容区的宽度；如果不等于，那么浏览器就会自动调整七个值中的某个值，让其成立，这就叫过度约束 。
如何调整：
1、七个值中如果没有auto，浏览器默认调整margin-right。
2、七个值中如果有auto，浏览器会调整auto；可设置auto有：margin-left，width，margin-right
（1）1个auto，谁是调谁；
（2）2个auto，有width调width，无width平分
总结 width>margin
例 margin：0 auto；居中显示
2、overflow属性
默认情况下，父元素的高度是被子元素撑开的，若父元素设置了，设置多少是多少。
子元素在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出，这个时候就要用overflow属性了
使用overflow属性设置父元素如何处理溢出？
可选值：
visble 默认值 子元素会从从父元素中溢出
hidden 溢出内容被裁剪不会显示
scroll 生成两个滚动条，通过其查看完整内容
auto 根据需要生成滚动条
3、CSS垂直外边距重叠
（1）兄弟元素
如果都是正值，谁大听谁；
如果一正一负，两者相加之和；
如果都是负值，谁小听谁。
（2）父子元素
垂直外边距重叠是发生在处于文档流的父子元素；当父元素和子元素的外边距相邻时，
如果设置子元素外边距，就会传递到父元素，从而导致页面布局混乱
<html> <head> <meta charset="utf-8" /> <style type="text/css"> .block1{ width: 200px; height: 200px; background-color: #bfa; } .block2{ width: 100px; height: 100px; background-color: skyblue; margin-top: 100px; } </style> </head> <body> <div class="block1"> <div class="block2"></div> </div> </body> </html>
解决方案
1.使子元素开启BFC属性：overflow：非visible的值
2.隔离父子元素的外边距，用边框
<body> <div class="block1"> <table></table> <div class="block2"></div> </div> </body>
这样的方法并不是最完美的，通过CSS的伪元素，可以不用在html中添加多余的结构
block1:before{ display: table; content: ""; }
