← Back Home

页面自适应布局

  1. Css

关于页面布局之前找了很多案例，当时是看懂了，但当让你写的时候发现自己视乎并不清楚他的原理，于是决定花些时间去整理一下关于页面布局的资料。主要分为俩列自适应布局，三列自适应布局，等高布局。

俩列布局: 左边固定，右边自适应

1.左边设置为浮动，右边不设浮动与宽度

* {
	padding: 0;
	margin: 0;
}
#main {
	height: 800px;
	background-color: yellow;
}
#left {
	float: left;
	width: 220px;
	height: 500px;
	background-color: red;
}
#right {
	padding-left: 220px;/* margin-left: 220px;border-left: 220px solid; */
	background-color: green;
	height: 500px;
}
<div id="main">
	<div id="left"></div>
	<div id="right"></div>
</div>

原理: 在元素不设宽度的情况下： 若元素为普通流中元素，元素宽度等于父元素宽度; 若元素不在文档流中,元素宽度等于内容宽度;

2.左边设置为浮动，右边不设浮动但设置宽度为100%

* {
	padding: 0;
	margin: 0;
}
#main {
	height: 800px;
	background-color: yellow;
}
#left {
	float: left;
	width: 220px;
	height: 500px;
	background-color: red;
}
#right {
	width: 100%;
	padding-left: 220px;
	box-sizing: border-box; 
	/* border-left: 220px solid;
	box-sizing: border-box; */
	background-color: green;
	height: 500px;
}
<div id="main">
	<div id="left"></div>
	<div id="right"></div>
</div>

原理: 在元素宽度为100%的情况下： 若元素为普通流元素或者浮动元素，元素宽度为父元素宽度的100%；若元素为绝对定位元素，元素宽度为元素offset-parent宽度的100%；若元素为固定定位元素，元素宽度始终为body的100% 设置box-sizing（兼容性IE8+）使#right的宽度为原来的100%。

3.俩边都设置浮动时

* {
	padding: 0;
	margin: 0;
}
#main {
	height: 800px;
	background-color: yellow;
	overflow: hidden;
	width: 100%;
}
#left {
	float: left;
	width: 200px;
	background-color: red;
	height: 300px;
	margin-right: -200px;
}
#right {
	float: left;
	width: 100%;
	height: 300px;
	border: 1px solid;
}
#rightContent {
	margin-left: 200px;
	height: 300px;
	background-color: white;
}

<div id="main">
	<div id="left"></div>
	<div id="right">
		<div id="rightContent">
		</div>
	</div>
</div>

原理: 1.首先将#left设置固定宽度并向左浮动，#right设置width: 100%; 并向左浮动。由于页面宽度限制#left与#right会处于俩行。 2.将#left设置css属性margin-right: -#left的宽度; 让其不占据原来的位置，此时的#left与#right处于同一行，但#right会覆盖掉#left。 3.设置#rightContent的margin-left: #left的宽度px。

三列布局: 左边右边固定，中间自适应

1.基本的布局方式

* {
	padding: 0;
	margin: 0;
}
#main {
	width: 100%;
	background-color: yellow;
	overflow: hidden;
	height: 500px;
}
#left {
	float: left;
	width: 150px;
	background-color: red;
	height: 300px;
	margin-right: -150px;
}
#right {
	float: left;
	width: 200px;
	background-color: green;
	height: 300px;
	margin-left: -200px;
}
#center {
	float: left;
	height: 300px;
	width: 100%;
}
#centerContent {
	height: 300px;
	margin: 0 200px 0 150px;
	background-color: white;
}

<div id="main">
	<div id="left"></div>
	<div id="center">
		<div id="centerContent">
		</div>
	</div>
	<div id="right"></div>
</div>

原理: 原理跟俩列布局的俩边都浮动的自适应相同 右边的定位使用了marin-left: -#left的宽度值; 原理与#right相同。

2.定位的方式布局

该方式简单，不做叙述。该方法不能实现等高布局，在设置定位的时候父元素要有高度，不能实现高度自适应。

三列布局: 左边中间固定，右边自适应

1.基本的布局方式

* {
	padding: 0;
	margin: 0;
}
#main {
	width: 100%;
	background-color: yellow;
	overflow: hidden;
	position: relative;
	height: 500px;
}
#left {
	width: 150px;
	background-color: red;
	height: 300px;
	float: left;
	margin-right: -150px;
}
#center {
	width: 200px;
	background-color: green;
	height: 300px;
	float: left;
	position: relative;
	left: 150px; 
}
#right {
	width: 100%;
	float: left;
	height: 300px;
}
#rightContent {
	background-color: white;
	margin-left: 350px;
	height: 300px;
}
<div id="main">
	<div id="left"></div>
	<div id="center">
	</div>
	<div id="right">
		<div id="rightContent">
		</div>
	</div>
</div>

原理: 原理跟俩列布局的俩边都浮动的自适应相同 但中间块#center的布局使用了绝对定位的方式

等高布局

1.基本的布局方式

* {
	padding: 0;
	margin: 0;
}
#main {
	width: 100%;
	background-color: yellow;
	overflow: hidden;
}
#left {
	float: left;
	width: 150px;
	background-color: red;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
	margin-right: -150px;
}
#right {
	float: left;
	width: 100%;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
}
#rightContent {
	margin-left: 150px;
	background-color: green;
}

<div id="main">
	<div id="left">aaaa</div>
	<div id="right">
		<div id="rightContent">
			aaaa<br><br><br>aaaa
		</div>
	</div>
</div>

原理: 父元素#main不设高度设置overflow: hidden;，#left与#right设置css属性padding-bottom: 9999px; margin-bottom: -9999px;以上示例以俩列布局俩边均浮动为例，其余俩种俩列自适应方式及三列自适应均可实现。 使用定位的布局方式不可实现等高布局，使用定位布局的时候需要先给父级添加一个高度值

comments powered by Disqus