什么是布局
现有样式
- 文档流
- 浮动
- 定位
不能满足人们的需求.
人们需要:
- 导航栏+内容
- 导航栏+内容+广告栏
- 从上到下、从左到右、定宽、自适应...
CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局
“DIV + CSS 布局”？
国外一般不这么叫.<div> 是一个无语义的标签，适合用来做与内容无关的事情.
只能用<div> 吗？
- 不一定
- 尽量使用有语义的标签
常见布局(pc)
-
固定宽度布局
所有的内容都在页面宽度范围内,最多使用.
优点: 简单,每个分区的宽度都可以固定.
缺点:浏览器宽度小于内容宽度时,会出现滚动条. 弹性（fluid）布局
无固定宽度.一般需要百分比来适配
优点:页面好看.
缺点:无论设计还是实现,都比较复杂,要考虑多种情况
- 响应式布局 —— 多终端（PC、Pad、Phone）
常见具体布局
-
单列布局
实现:
#定宽
width: 1000px; 或 max-width: 1000px;
#水平居中
margin-left: auto; margin-right: auto;
max-width 和 width的区别:
- 前者在浏览器宽度小于max-width情况下,显示宽度为浏览器宽度.
- 后者在浏览器宽度小于width情况下,宽度不变,下方出现滚动条.
优化:
省标签，便于控制局部 范例
通栏
给通栏加背景色 范例
通栏优化:
给 body 设置min-width 去掉滚动背景色 bug
内部元素水平居中
.parent{text-align:center;}
.child{display: inline-block;}
如果child高度不一致,需要设置
vertical-align:top实现顶部对齐.
IE 6 不支持 inline-block :
.child{*display: inline; *zoom: 1;}
bfc可以让元素呈现块级特性,即使是行内元素
使用zoom1可以触发bfc.设置height,width,
加*表示ie浏览器识别
-
双列布局
一列固定宽度，另外一列自适应宽度
如何实现
浮动元素 + 普通元素margin 范例
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
如果侧边栏在右边:
.aside{float: right;}
.main{ margin-right: 210px;}
注意:考虑到浏览器的渲染顺序,
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>`
aside和main顺序不可更改.
-
三列布局
两侧两列固定宽度，中间列自适应宽度
如何实现
#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-left*/
margin-right: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
<div id="content">
<!-- 注意main的位置 -->
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
