目录
-
流(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) | 相对于其外围包含元素来定位,元素仍在正常的页面流中,然后再按指定的量偏移元素 |