常用布局-列宽度是固定宽度还是自适应

如何去理解一个页面需要仔细分析,页面结构形式再怎么变化,最终都还是基于两列布局结构的演变.

不同布局之间最大的区别是：列宽度是固定宽度还是自适应

布局思路：主要利用浮动和定位方式，借助负边距

宽度值与浮动的关系：

盒模型宽度默认auto，宽度撑满浏览器窗口宽度或其父级宽度，拥有padding和margin值及宽度默认值auto时盒模型的宽度大小始终保持在浏览器窗口或父级所显示的范围内。

盒模型宽度默认auto加上float时，盒模型的宽度由内容撑开。只能添加具体的width值保证盒模型宽度。

两列布局：

//结构代码
<div id="header"></div>
<div id="contanier">
    <div class="mianBox"></div>
    <div class="sideBox"></div>
</div>
<div id="footer"></div>

三列布局1：许多三列布局本质上还是两列布局，只是在主要内容区mainBox内继续分为两列左右浮动。

<div class="header">头部信息</div>
<div class="container">
     <div class="wrap">
         <div class="mainBox">主要内容区域</div>
         <div class="subMainBox">次要内容区域</div>
     </div>
     <div class="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div>

三列布局2：为三个独立的列进行布局；

<div class="header">头部信息</div>
<div class="container">
     <div class="mainBox">
         <div class="content">主要内容区域</div>
     </div>
     <div class="subMainBox">次要内容区域</div>
     <div class="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div>

两列或三列等高布局：

上面的布局情况都可以进一步做为两列或三列等高布局：可以利用背景图片，负边距或边框模拟等都可以实现，不过都会存在一定bug,

CSS主要作用为修饰页面，而判断是否等高是一种行为，应该使用js脚本，直接判断两列的高度，取得较大者，都赋值为较大者高度值。