css什么是自适应布局,CSS自适应布局

今天小编介绍自适应布局实现方法的demo，

1)左侧固定宽度，右侧自适应，随着窗口的宽度而变化；

2)右侧固定宽度，左侧自适应；

3)中间自适应，两边定宽

1、左定宽

用左侧margin-left设为负宽度的方法，因为左侧脱离文档流，右侧宽度设为100%

效果如下：

left.png

代码如下：

.head{

display: block;

text-align: center;

line-height: 50px;

height: 40px;

background-color: yellow;

color: purple;

}

.body{

display: block;

height: 400px;

width: 100%;

}

.left{

float: left;

width: 100px;

height: 100%;

background-color: pink;

margin-right: -100px;

}

.right{

height: 100%;

width: 100%;

color: white;

background-color: lightblue;

float: left;

margin-left: 100px;

}

.foot{

display: block;

width: 100%;

height: 40px;

background-color: yellow;

text-align: center;

}

细节解释：line-height等于height可以使文本上下居中，如果line-height超过height，以height为准

2、右定宽

仍然采用margin方法，但这里有一个瑕疵，左侧的部分会被遮挡

right.png

.right{

float: right;

width: 100px;

height: 100%;

background-color: pink;

margin-left: -100px;

}

.left{

height: 100%;

width: 100%;

color: white;

background-color: lightblue;

float: left;

}

3、中间自适应

实现方法是，左右两边浮动，且在html中先写左右标签，后写中间标签，利用浏览器从上到下解析html标签的特点

middle.png

.body{

display: block;

height: 400px;

width: 100%;

}

.left{

height: 100%;

float: left;

width: 100px;

background-color: pink;

}

.middle{

background-color: lightblue;

height: 100%;

}

.right{

height: 100%;

float: right;

width: 100px;

background-color: lightgreen;

}