版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/funkstill/article/details/84728094
目录
-
流（Flow）
浏览器在页面上摆放HTML元素所用的方法。
浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的元素，并且在每个块元素之间加一个换行。
内联元素在水平方向上挨着，总体上会从左上方流向右下方。
-
用float浮动元素
float属性尽可能远的向左或向右浮动一个元素。然后它下面的所有内容会绕流这个元素。
注意！浮动元素必须设置宽度。
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width:280px;
float:right;
}-
用clear解决重叠问题
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear:right;
/*查看页脚邮编有没有一个浮动的元素，如果有，就把页脚下移，直到右边无浮动内容*/
}-
流体布局（liquid layouts）
不论浏览器调整到多大的宽度，布局都会扩展，填满整个浏览。
-
冻结布局（frozen layouts）
冻结元素，让他们锁定在页面上，根本不能移动，避免由于窗口扩展带来的问题。
-
凝胶布局（Jello）
介于流体布局和冻结布局之间。
-
绝对定位absolute
绝对定位元素对其他元素没有影响。可通过index-z属性决定离用户的距离。
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
}
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
position: absolute;
top: 128px;
right: 0px;
width: 280px;
}-
CSS表格
<div id="tableContainer">
<div id="tableRow">
<div id="main">
<h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
<p>...
</p>
</div>
<div id="sidebar">
<p class="beanheading">
....
</p>
</div>
</div>
</div>#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
/*margin: 0px 10px 10px 10px;*/
}
#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
/*margin: 0px 10px 10px 10px;*/
vertical-align: top;
}
#tableContainer {
display:table;
border-spacing:10px;
}
#tableRow{
display:table-row;
}-
固定定位
像绝对定位一样为元素指定位置，位置是距离浏览器窗口边界的一个偏移量，而不是距页面边界的距离.
<div id="coupan">
<a href="freecoffee.html" title="Click here to get your freecoffee.">
<img src="images/ticket.gif"
alt="Starbuzz coupan ticket">
</a>
</div>-
四种定位方式（position属性）
| 静态定位（static） | 默认方式，内容正常流入 |
| 绝对定位（absolute） | 将元素完全从页面流中取出，允许指定绝对位置，相对于理她最近的父元素指定的（一般为<html>,除非自行制定其他父元素） |
| 固定定位（fixed） | 相对于浏览器窗口，把元素放在一个特定的固定位置上 |
| 相对定位（relative） | 相对于其外围包含元素来定位，元素仍在正常的页面流中，然后再按指定的量偏移元素 |