-
什么是布局
现有样式不能满足人们的需求
- 文档流
- 浮动
- 定位
人们需要： - 导航栏+内容
- 导航栏+内容+广告栏
- 从上到下、从左到右、定宽、自适应....
css 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局。 -
常见布局
- 固定宽度
- 弹性（fluid）布局
- 响应式布局--多终端（pc、pad、phone）
-
单列布局
Paste_Image.png
如何实现：
定宽： width: 1000px; 或max-width: 1000px;
水平居中：margin-left: auto; margin-right: auto;
Paste_Image.png
-
双列布局
如何实现：
浮动元素+普通元素
Paste_Image.png
-
三栏式布局
两侧两列固定宽度，中间列自适应宽度
三栏式布局
#content:after{
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-left: 110px;
margin-right: 210px;
height: 400px;
background: red;
}
<div id="content">
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
效果：
效果
-
圣杯布局
- 是三列布局，两边固定宽度，中间自适应
- 中间内容元素在 dom 元素次序中优先位置
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
效果：
效果
缺点：.mian的最小宽度不能小于.aside的宽度。（把整个页面的宽度收缩后，会出现布局错乱的效果，因为当页面收缩时，main因为是其父容器content的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度<aside的宽度，就不能容纳aside，所以将其挤到了下一行。）
解决：可以给父容器ct加上一个min-width样式，min-width的值不能小于aside和extra两者间的宽度最大值，这样做可以使中间的main的宽度始终比extra和aside大，就不会导致布局错乱了。
-
双飞翼布局
双飞翼布局解决了什么问题呢？
双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加，第7步注释掉*/
/* height: 350px; */ /*第1步添加，第7步注释掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
效果：
效果
文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源
