css常用页面布局

以前这些东西都是信手拈来的，很久不用都忘了，时间真是一把杀猪刀。

今天是初七，2013年春节过后上班的第一天，很多人还没来。我也没什么活，我在网上找了些布局的东西看了下，自己又实际的写了一些，颇有收获。

第一种常见的页面布局，是左栏固定，右栏自适应的结构。css样式如下：

.left{
    width:200px;
    border:1px solid #666;
    float: left;
}
.right{
    margin-left: 205px;
    border:1px solid #666;
}

看起来很简单，既是左边浮动，右边是标准流，右边有相应的margin-left.

这个时候我发现一个问题，也是常用的width:100%;当加了这一句之后，发现右边已经超出了浏览器的界限，这个是为什么呢。

原来宽度100%，这里的100%表示的是当前标签的宽度父元素的宽度的100%。父元素是body,所以当前标签就和body一样宽了。除了当前标签的宽度，再加上margin-left和border的宽度，所以这个标签看起来就比浏览器还要宽了。

这里搞明白了两个概念：

标准流盒子的宽度是以父元素为自适应标准的。

非标准流的盒子是以内容为自适应标准的。

下面是三列的布局，两边固定宽度，中间一列自适应。照例，左边浮动宽度固定。中间不浮动，但是有margin-left和margin-right,现在的问题是，右边怎么办，原想，右边的话就来一个float:right,右浮动到右边，发现这样

不妥，不妥的原因很简单，中间的标准流将最右边的非标准流挤了下来。

最初，标准流可以将非标准流挤下来 我有些不信，简单的做了一个小例子，发现确实如此，例子如下：

 

<div class="whole">
        <div style="width:100px;border:1px solid">标准流</div>
        <div style="float:left;width:100px;border:1px solid">非标准流</div>
    </div>

 

通过这个例子，发现非标准流并没有对标准流视而不见，反而是去了下一行。

 

我对右边这列采用了绝对定位的方法 很好用。写到这里觉得好像还可以有其他的解决方案，我再试一下。

再次尝试就不用绝对定位的方法了，根据非标准流对标准流视而不见的原则，我改了一下结构

 

.left{
    width:200px;
    border:1px solid #666;
    float: left;
}
.mid{    
    border:1px solid #666;
    margin-left: 205px;
    margin-right: 205px;
}
.rig{
    float: right;
    width:200px;
    border:1px solid #666;
}

<div class="whole">
        <h1>三栏两边固定中间自适应</h1>
        <div class="left">float:left</div>
        <div class="rig">float:rig</div>
        <div class="mid">no float:mid</div>        
</div>

 

这个时候就正常了。

原因很简单，标准流对非标准流视而不见，因此，将mid设置了margin-left和margin-right的属性后，不会被挤到下一行。

这里得出了两个结论：

标准流是看不到非标准流的，也就是上面说的，标准流对非标准流视而不见。

非标准流在布局时是会考虑标准流的。