CSS布局的核心三要素：定位，浮动和外边距操纵。
一、计划布局
- 把页面划分为大得结构区域。容器，页眉，页脚，内容。
- 内容区域本身，建立网格区域。
- 在不同的内容中寻找合适的布局。
- 拿起绘图纸和彩铅，详细设计结构和尺寸
- 关注内容块的关系，结构，模式
- 找出模式，约定命名，定义使用的元素
记下颜色编码，尺寸信息。在打印的设计稿上批注。
二、基于浮动的布局
浮动布局最简单且可靠。
两步实现：1.设定浮动元素宽度；2.设置向左或向右浮动。
tips:
浮动所有元素，在整个文档的footer进行clear.
2.1两列的浮动布局
一列左浮动，一列右浮动
<pre>
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局</title>
<style type="text/css">
.content .primary{
width: 650px;
padding-right: 20px;
float: right;
display: inline;/*防止IE中双外边框浮动产生的bug*/
}
.content .secondary{
width: 230px;
float: left;
display: inline;/*防止IE中双外边框浮动产生的bug*/
}
.content{
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<p>This is my header</p>
</header>
<div class="content">
<div class="primary">
<p>Primery</p>
</div>
<div class="secondary">
<p>Secondary</p>
</div>
</div>
<footer>
<p>This is my footer</p>
</footer>
</div>
</body>
</html>
`
</pre>
2.2三列的浮动布局
两个content左右浮动，一个content中的两个内容再一次左右浮动。
与两列布局类似
三、固定宽度、流式和弹性布局
width以像素为单位，称为固定宽度布局
网友评论