摆放与布局——普通流、浮动定位、绝对定位、表格
一·流
流实际上就是浏览器从HTML文件最上面开始，从上到下沿着元素逐个显示所遇到的各个元素。块元素与块元素之间会有一个换行，第一个是块元素，然后是一个换行，然后是第二个元素，以此显示。内联元素会在水平方向上相互挨着，总体上从左上方流向右下方。
p.s.关于盒模型
浏览器并排放置两个内联元素时，两个元素有不同的外边距，则两个元素之间的外边距是两个元素的和。而当上下放置两个块元素时，其外边距的情况不同于前者，两个元素之间的边距是最大一个元素外边距的值，共同的外边距被折叠了，因此折叠的外边距高度就是最大的外边距高度。
二、float元素——如何浮动元素
1、指定一个id（如段落<p id="amszing">）
2、指定一个宽度width（width指定的是文本宽度，不包括内边距）
#amazing{width:200px;}
3、浮动
#amazing{width：200px;
float:right;}
此时元素位于页面右方，浮动流不再是正常流的一部分，因此这个浮动段落会在正常流中删除，此前这个浮动段落的后面的元素会占据其原本的位置。不过内联元素定位时会考虑到浮动元素的边界，因此会围绕着浮动元素。
三、流体、冻结、凝胶设计
1、流体布局：调整浏览器宽度，布局会根据浏览器宽度进行调整，填满整个浏览器。（浏览器默认）
2、冻结布局：这种布局会锁定元素，调整浏览器窗口大小，页面仍保持其设计布局。
如<body>
<div id="allcontent">
<p>...</p>
</div>
</body>
可为“allcontent”设计样式，allcontent包含页面中的所用内容。
#allcontent{width:800px; /*将其中包含的所有内容限制在800像素之内，div的宽度总是800px，即使浏览器大小调整了，这个宽度也不变，则将div以及其中所包含的内容冻结在页面上。*/
padding-top:5px;
padding-bottom:5px;
background-color:#675c47;
}
3、凝胶布局
凝胶布局会锁定页面中内容区的宽度，会将它在浏览器居中。
#allcontent{width:800px;
padding-top:5px;
padding-bottom:5px;
background-color:#675c47;
margin-left：auto；
margin-right：auto；
}
四、绝对 定位
一个元素绝对定位时，浏览器首先要先将其从流中完全删除，然后指定一个位置放置元素。指定一个top和right属性（或left和bottom）的位置。
如：定位在距页面右边200像素，距上面100像素的地方，内容宽度设置为280px.
#sidebar{position:absilute;
top:100px;
right:200px;
width:280px;
}
由于元素是绝对定位的，也会从流中删除，流中的元素会忽略绝对定位元素的存在，因此不像浮动定位会围绕定位元素。他们甚至不知道页面上有绝对定位的元素。
p.s.position属性有：static、absolute、fixed、relative
static（静态），如果是静态定位，元素会放在正常的文档流中，而不是由你来指定位置，由浏览器 决定这些 静态定位元素放在哪里。你可以使用float属性将一个元素从流中删除，可以让其向右向左浮动，但最终仍然是浏览器决定将它放在哪里，没有指定一个绝对的位置信息，由浏览器默认将其放置。与其相对应的absolute则可以设定一个位置来放置元素，使用绝对定位时，将由你来告诉浏览器放置元素的具体位置。fix（固定定位）是将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面），所以固定元素永远也不会移动。相对（relative）定位会让元素正常地流入页面，不过在页面上显示之前要进行偏移。相对定位常用于更高级的定位和特殊效果。
五、表格定位
1、先创建一个<div>表示整个表格，行和列要嵌套在这个<div>中。
2、对表格中的每一行要创建一个<div>,其中包含行内容。
3、对于每一列，只需要一个块元素作为该列内容。如有两个块元素，只有一行的情况。
div#tableContainer{
display:table;
border-spacing:10px;/*为表格中的单元格增加10px的边框间距*/
}
div#tableRow（行）{
display:table-row;}
#main {
display:table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align:top;/*使表格两个单元格中所有内容相对于单元格上边对齐，可不用再为其增加margin了*/
}
#sidebar {display:table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
vertical-align:top;
}
