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

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

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

       

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

       

         宽度值与浮动的关系：

        盒模型宽度默认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>

	header	contanier	mainBox	sideBox	footer
左右固定	width/height(px)	width(px) clearFloat(清浮动)	width(px) float(left)	width(px) float(right)	width/height(px)
左右自适应	height(px)	clearFloat(清浮动)	width(%) float(left)	width(%) float(right)	height(px) clearBoth(兼容IE)
左自适应右固定 (绝对定位方式）	height(px)	position: relative clearFloat(清浮动) zoom: 1 (IE绝对定位消失)	float(left) margin-right: 200px; display:inline;(IE双边距bug)	position: absolute; top: 0;  right: 0;   width: 200px;	height(px)	固定区域高于自适应区域时会产生bug,需要借助js判断父级高度
左自适应右固定 (float借助负margin）	height(px)	clearFloat(清浮动) zoom: 1 (IE绝对定位消失)	float(left) margin-right: 200px; display:inline;(IE双边距bug)	float: left; width: 200px; margin-left: -200px;	height(px)

 

        三列布局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>

	header	contanier	mainBox	content	sideMainBox	sideBox	footer
两列定宽 中间自适应	height(px)		width(100%) float(left)	margin:0 210px 0 310px	float: left; width: 300px; margin-left: -100%;	float: left; width: 200px; margin-left: -200px;	height(px) clearBoth
左侧定宽 中间右侧自适应	height(px)		width(100%) float(left)	margin:0 41% 0 310px	float: left; width: 300px; margin-left: -100%;	float: left; width: 40; margin-left: 40%;
三列自适应	height(px)		width(100%) float(left)	margin:0 41% 0 21%	float: left; width: 20%px; margin-left: -100%;	float: left; width: 40%; margin-left: 40%;

 

         两列或三列等高布局：

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

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

 

转载于:https://www.cnblogs.com/Peng2014/p/4704475.html