前端页面布局小结（入门级，大神请绕道）

页面布局小结

1. div高度靠内容撑起来
2. 父级有个div 子级两个div,宽度通过百分比设定（此时不要设border大小，会造成空间不足，挤下去），高度通过内容撑起，如果要设置高度，正负3000方法，
   下面如果有页脚,下padding流出位置
3. div下的iframe高度宽度可通过100%来，实现与父级div同大小
4. 一个div设置浮动，后面div浮动自动跟随
5. 上中下，中多个子级浮动，下若不想浮动，要对中清除浮动

在这里插入代码片

1. 为父级div定义伪类

/*清除浮动代码*/
        .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .clearfloat{zoom:1}

2. 实现div上下左右居中（登录框可能会用到）

<div style="background-color: #66afe9;width: 800px;height: 200px;
position: absolute;top:0;right:0;bottom:0;margin:auto auto;left:0;"></div>

3. 实现div左右居中

<div style="background-color: #66afe9;width: 800px;height:200px;margin:0 auto;"></div>

4. iframe 自适应父级div高度

<script>
//iframe高度
function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight;
    }
    window.onresize=function(){ changeFrameHeight();}
    $(function(){changeFrameHeight();
});
</script>

5. div设置高度
   方法1 补丁大法：
   （1、父DIV设置　overflow:hidden;
   （2、对要高度自适应的DIV设置　padding-bottom:100000px;margin-bottom:-100000px;两列或多列同理。
   方法2.背景图填充法
   大站用得比较多的方法，如163等，研究了一下
   给父DIV设置了背景图片填充，所有DIV都不设高度。
   方法3JS法：
   原理：用JS判断左右DIV的高度，若不一致则设为一致。

vara=document.getElementById("left");  
varb=document.getElementById("right");  
if(a.clientHeight<b.clientHeight)  
{  
a.style.height=b.clientHeight+"px";  
}  
else  
{  
b.style.height=a.clientHeight+"px";  
}  

6. 文字垂直居中
   line-height:父级高度 （并非真正的居中，vertical line 真正 但不好使）
   （笔记更新ing…）