HTML&CSS关于布局

1布局

关于浮动与定位的区别：元素进行浮动后，会按照浮动流的先后顺序进行排列，而绝对定位则是每一个元素都独立存在于其他所以元素。所以在日常的选择中，固定分布的布局尽量使用定位(relative/absolute)，而浮动则在导航条等横式布局中运用得多一些。

1.1单列布局

消除浏览器的默认样式

body{margin:0; padding:0;}

块状元素水平居中，0代表上下方向，auto代表左右方向

margin:0 auto;

div当不设置宽度的时候，是横向通栏的

注：宽度需要自适应的时候，应设置百分比

1.2两列&三列布局 

两列布局的特征是：侧栏固定，主栏自适应宽度

三列布局的特征是：双侧栏固定，主栏自适应宽度

• float+margin布局

结构代码。注意先写两个侧栏，再写主栏

<div class="box1">侧栏1</div>
<div class="box3">侧栏2</div>
<div class="box2">主栏</div>

样式代码。要点：侧栏浮动，主栏用margin让出空间

<style type="text/css">
		*{
            margin :0;
            padding :0;
         }
        .box1 {
			width: 100px;
			height: 500px;
			background: #aaaaaa;
			float: left;
		}
		.box2 {
			height: 500px;
			margin-left: 100px;
			margin-right: 100px;
			background: #aaaaff;
		}
		.box3 {
			width: 100px;
			height: 500px;
			background: #aaffaa;
			float: right;
		}
</style>

• position+margin布局

通过绝对定位固定两个侧栏，同样通过margin给两个侧栏腾出空间，中间宽度自适应。

结构代码。可以根据逻辑，将主栏放在中间

<div class="box1">侧栏1</div>
<div class="box2">主栏</div>
<div class="box3">侧栏2</div>

样式代码。侧栏绝对定位，主栏设置margin，注意：这里要取消浏览器的默认样式，即*{margin:0;paddin:0;}，或者给三列再外包一个div，并设置相对定位。

	* {
			margin:0;
			padding: 0;
		}
		.box1 {
			width: 100px;
			height: 500px;
			background: #aaaaaa;
			position: absolute;
			top :0px;
			left : 0px;
		}
		.box2 {
			height: 500px;
			margin-left: 100px;
			margin-right: 100px;
			background: #aaaaff;
		}
		.box3 {
			width: 100px;
			height: 500px;
			background: #aaffaa;
			position: absolute;
			top :0px;
			right: 0px;
		}

• 圣杯布局(float+负margin+padding+position)

结构代码。其中，主栏放在第一个，首先渲染主栏

<div class="box">
		<div class="box2">主栏Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsum, dolorem corporis voluptas, ipsam nemo est voluptatibus, quod quos culpa quaerat sed voluptate. Et incidunt asperiores explicabo quas, cumque corporis.</div>
		<div class="box1">侧栏1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quos quod molestiae numquam ipsum libero delectus quam. Similique saepe distinctio ea assumenda omnis reprehenderit odit velit, quidem officia eos provident!</div>
		<div class="box3">侧栏2</div>
	</div>	

样式代码。

要点：

1. 左右两边预留空间。父元素设置padding-left:左侧栏宽度；padding-right:右侧栏宽度；
2. 三个子元素都浮动。float:left;
3. 侧栏拉上去。左侧栏margin-left：-100%；右侧栏：margin-right:-右侧栏的宽度；
4. 左侧栏设置定位。将左侧栏移到边上。

* {
			margin:0;
			padding: 0;
		}
		.box{
			padding-left: 100px;
			padding-right: 100px;
			position: relative;
		}
		.box1 {
			width: 100px;
			height: 500px;
			margin-left: -100%;
			background: #aaaaaa;
			float: left;
			position: relative;
			right: 100px;
		}
		.box3 {
			width: 100px;
			height: 500px;
			margin-right: -100px;
			background: #aaffaa;
			float: left;
				
		}
		.box2 {
			height: 500px;
			width: 100%;
			background: #aaaaff;
			float:left;
		}

最小宽度：两个left的宽度+一个right的宽度

• 双飞翼布局

在圣杯布局上做了改进，在主栏外再加一个div标签，设置margin便不会影响到两个侧栏。

结构代码。主栏加了一个box_m的外div

<div class="box">
		<div class="box2_m">
			<div class="box2">主栏Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsum, dolorem corporis voluptas, ipsam nemo est voluptatibus, quod quos culpa quaerat sed voluptate. Et incidunt asperiores explicabo quas, cumque corporis.</div>
		</div>
		<div class="box1">侧栏1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quos quod molestiae numquam ipsum libero delectus quam. Similique saepe distinctio ea assumenda omnis reprehenderit odit velit, quidem officia eos provident!</div>
		<div class="box3">侧栏2</div>
	</div>	

样式代码。

要点：

1. 设置侧栏box2、box3和box_m为浮动，float:left;
2. 留出位置，设置box2的左右边距，为左右侧栏的宽度。
3. 移动左右侧栏到相应的位置。左栏：margin-left：-100%，右栏：margin-right: -右栏宽度px；

* {
			margin:0;
			padding: 0;
		}
		.box1 {
			width: 100px;
			height: 500px;
			margin-left: -100%;
			background: #aaaaaa;
			float: left;
		}
		.box3 {
			width: 100px;
			height: 500px;
			margin-left : -100px;
			background: #aaffaa;
			float: left;	
		}
		.box2 {
			height: 500px;	
			background: #aaaaff;
			margin-left: 100px;
			margin-right: 100px;
		}
		.box2_m {
			float:left;
			width: 100%;
		}