布局与定位
-
页面的布局
一.流
1.块元素从上往下流，个元素之间有一个换行。每个元素默认占浏览器整个宽度；内联元素在水平方向互相挨着，总体上从左上方流向右下方。
2.并排放置内联元素：左元素外边距10px，右元素外边距10px，两个元素之间会有20px的空间；上下放置两个块元素。他们共同的外边距会折叠在一起，两个边框的距离为最大的外边距高度。
3.浮动元素（float）：置于块元素上方，不影响正常的页面流动。但内联内容会考虑浮动元素的边界，围绕着这个浮动元素。（必须指定特定的高度）
4.元素clear属性指定其左边或右边不能有浮动元素。
二.布局
-
流体布局
拓展浏览器窗口，页面内容会拓展以适应页面。
-
冻结布局
内容宽度固定。调整屏幕大小，设计不变。示例如下：
HTML文件中：
<body>
<div id="allcontent">
.........
</div>
</body>
CSS文件中：
#allcontent{
width:800px;
...
}
-
凝胶布局
内容宽度固定，但外边距随浏览器窗口扩展，且通常把内容放在中央，更加美观。
-
表格显示布局
将元素置于表格当中。示例如下：
HTML文件：
...
<div id="tablecontainer"> //表格div
<div id="tablerow"> //第一行div，里面包含firstcol和secondcol两列两个元素
<div id="firstcol"> //第一个元素
...
</div>
<div id="secondcol"> //第二个元素
...
</div>
</div>
...
</div>
CSS文件中：
#tablecontainer{
display:table; //这是表格布局
border-spacing: 10px; //单元格边框边距，不需要元素外边距
}
#tablerow{
display:table-row; //这是表格的一行
}
#main{
vertical-align: top; //单元格中的内容相对于单元格上边对齐
display: table-cell; //这是一个单元表格里的元素
...
}
#secondcol{
vertical-align: top;
display: table-cell;
...
}
-
元素的定位
四种定位方式：static,absolute,fixed,relative
-
静态定位（static）
默认方式，将元素置于正常流中。
-
绝对定位（absolute）
置于页面任何位置，相对页面边界放置。并不置于流中
#unix{
position:absolute;
top:150px;
left:100px;
width:400px;
}
-
固定定位（fixed）
相对浏览器窗口定位，页面滚动，固定定位的元素位置不变。
#unix{
position:fixed;
top:150px;
left:100px; (可以为负值)
width:400px;
}
-
相对定位（relative）
