布局
让设计在页面中水平居中
创建两列和三列的基于浮动的布局
创建固定宽度、流式和弹性布局
创建高度相等的列
css框架&系统
一.计划布局
在编写之前想好如何构建结构
先把页面划分成大的结构性区域(如页眉 内容区域 页脚),然后在内容区域本身,开始建立网格结构。最后,在各内容区域找不同的布局结构(如:是否分成两列三列四列)。
在每块内容里面的结构,查看是否有相同的模式,便于样式的标记
二.设置基本结构
1.简单的demo,包含页眉、内容区域和页脚
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
2.使用外边距让设计居中
.wrapper{
width: 920px;
/*使设计居中*/
margin: 0 auto;
/*文本内容是左对齐*/
text-align: left;
}
三.浮动布局
概念:在基于浮动的布局中,只需设置希望定位的元素的宽度,然后将他们左右浮动
1.两列浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*因为这些元素是浮动的,他们不再在文档流中占据空间,会导致页脚上升*/
/*为了避免这种情况,对他们的父元素(这里是div)用溢出方法,来清理浮动*/
.content{
overflow: hidden;
}
.content .primary{
width: 650px;
padding-right: 20px;
float: right;
display: inline;
background: greenyellow;
}
.content .secondary{
width: 230px;
float: left;
/*用于防止IE双外边距浮动产生的bug*/
display: inline;
background: rosybrown;
}
</style>
</head>
<body>
<div class="content">
<div class="primary">primaryprimaryprimaryprimaryprimaryprimaryprimaryprimary</div>
<div class="secondary">secondarysecondarysecondarysecondary</div>
</div>
</body>
</html>
2.三列浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*因为这些元素是浮动的,他们不再在文档流中占据空间,会导致页脚上升*/
/*为了避免这种情况,对他们的父元素(这里是div)用溢出方法,来清理浮动*/
.content{
overflow: hidden;
}
.content .primary{
width: 670px;
float: right;
display: inline;
background: greenyellow;
}
.content .secondary{
width: 230px;
float: left;
/*用于防止IE双外边距浮动产生的bug*/
display: inline;
background: rosybrown;
}
.content .primary .primary{
width: 400px;
float: left;
display: inline;
}
.content .primary .secondary{
width: 230px;
padding-right: 20px;
float: right;
display: inline;
}
</style>
</head>
<body>
<div class="content">
<div class="primary">
<div class="primary">primaryprimaryprimaryprimaryprimaryprimaryprimaryprimary</div>
<div class="secondary">secondarysecondarysecondarysecondary</div>
</div>
<div class="secondary">123456789</div>
</div>
</body>
</html>
效果:
四.固定宽度、流式和弹性布局
1.以像素px为单位的布局类型为宽度的布局,固定宽度的布局常见。
固定宽度的布局也有缺点,窗口的尺寸大小改变他的布局是不变的。解决这个可以使用流式布局或弹性布局
2.流式布局(尺寸是%百分数)
缺点:在窗口较小时,行变得非常窄难以阅读,因此添加以像素或em为单位的min-width,防止布局变得太窄(若min-width设置太大,流式设计也会遇到和固定宽度布局相同的限制)
使用:
流式技术将前面的固定宽度的三列布局转换成流式三列布局。①窗口宽度设置为窗口总宽度的百分数%,(可以使用工具精准测量Liquid Fold),②以容器宽度的百分数形式设置主内容区域和次要内容区域的宽度。③然后需要设置主内容区域中列的宽度
注:为了确保文本行的长度适合阅读,最好添加以em为单位的max-width,对于较小的窗口尺寸要添加min-width
3.弹性布局
是相对于字号(而不是浏览器宽度)来设置元素的宽度。以em为单位来设置宽度,可以确保在字号增加时整个布局随之扩大。
缺点:①不能充分利用可用空间(与固定宽度类似)②增大的同时可能使水平滚动条出现,所以防止出现这种问题,需要在该容器div中添加max-width:100%
.wrapper{
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}
.content ,primary{
width: 72.82%;
float: right;
display: inline;
}
.content .secondary{
width: 25%;
float: left;
display: inline;
}
.content .primary .primary{
width: 59.7%;
float: left;
display: inline;
}
.content .primary .secondary{
width: 34.33%;
padding-right: 2em;
float: right;
display: inline;
}
四.faux列
创建一个伪列,方法数在一个占据布局最大高度的元素(如div)上应用重复的背景图像
固定宽度(较容易)
对于固定宽度的两列布局,只需在容器元素上应用一个垂直重复的背景图像,其宽度和导航区域相同
对于固定宽度的三列布局,这次的重复的背景图像需要横跨整个容器
流式布局(较复杂)(技巧:按百分比对背景图像进行定位)
五.高度相等的列
六.css3列(也可以创建高度相等的文本列)
七.css框架&系统
YUI 、Grids、Blueprint(使用column和column span)、960
补充:
1.布局一些问题:
拥有布局的元素不会收缩
布局元素对浮动进行自动清理
相对定位的元素没布局
在拥有布局的元素之间外边距不叠加
在没有布局的块级链接上,单击区域只覆盖文本
在滚动时,列表项上的背景图像间歇性的显示和消失
2.hack和过滤器
3.常见bug及修复方法
①.双外边距浮动bug
display:inline 即可处理,因为元素是浮动的,display:inline不会影响样式
②.3像素文本偏移bug