单列变双列css_css布局-基础,单列,双列,三列

什么是布局

现有样式

文档流

浮动

定位

不能满足人们的需求.

人们需要:

导航栏+内容

导航栏+内容+广告栏

从上到下、从左到右、定宽、自适应...

CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

“DIV + CSS 布局”？

国外一般不这么叫.

是一个无语义的标签，适合用来做与内容无关的事情.

只能用

吗？

不一定

尽量使用有语义的标签

常见布局(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 范例

#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;

}

aside

content

footer

如果侧边栏在右边:

.aside{float: right;}

.main{ margin-right: 210px;}

注意:考虑到浏览器的渲染顺序,

aside

content

`

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;

}

aside

aside

content

footer