一、margin
塌陷现象
给子级加margin-top时想让子移动，但是此时父级会跟随子级一起移动---称为塌陷。
代码
<style>
div.father{ width: 200px; height: 200px; background: #FFC0CB; }
div.son{ width: 100px; height: 100px; background: beige; margin-top:50px; }
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>效果
解决方法（父级+两者选一个）
overflow: hidden; 或者 border: 1px solid #000000; 二、对于浮动起来的元素
position元素中设置absolute和fixed或者float都会脱离文档流
此时切记要加width:100%;
因为块级元素默认width:100%;所以不要忘记加！！
三、对于底部或者自适应结构
都是将固定宽度的padding出去 本身元素再margin一下
不管是设置底部栏 或者是三栏 或者两栏结构
需要自适应的始终都应该是width:100%
四、垂直居中
父级
知道高度
子级
position:relative;
top:50%;
transform:transformY(-50%);五、css3的@media属性
响应式布局
**************************************************************************