使用 display 屬性改變生成的框的類型
通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級元素一樣缕减。還可以通過把 display 設(shè)置為 none雷客，讓生成的元素根本沒有框。這樣的話桥狡，該框及其所有內(nèi)容就不再顯示搅裙，不占用文檔中的空間。
CSS 定位機制
CSS 有三種基本的定位機制：普通流裹芝、浮動和絕對定位
position 屬性值的含義：
- static
元素框正常生成部逮。塊級元素生成一個矩形框，作為文檔流的一部分嫂易，行內(nèi)元素則會創(chuàng)建一個或多個行框兄朋，置于其父元素中。 - relative
元素框偏移某個距離怜械。元素仍保持其未定位前的形狀颅和，它原本所占的空間仍保留。 - absolute
元素框從文檔流完全刪除缕允，并相對于其包含塊定位峡扩。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉障本，就好像元素原來不存在一樣教届。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框彼绷。 - fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute巍佑，不過其包含塊是視窗本身。
相對位置
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>這是位于正常位置的標(biāo)題</h2>
<h2 class="pos_left">這個標(biāo)題相對于其正常位置向左移動</h2>
<h2 class="pos_right">這個標(biāo)題相對于其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進行移動寄悯。</p>
<p>樣式 "left:-20px" 從元素的原始左側(cè)位置減去 20 像素萤衰。</p>
<p>樣式 "left:20px" 向元素的原始左側(cè)位置增加 20 像素。</p>
</body>
</html>
絕對位置
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
<p>通過絕對定位猜旬，元素可以放置到頁面上的任何位置脆栋。下面的標(biāo)題距離頁面左側(cè) 100px倦卖，距離頁面頂部 150px。</p>
</body>
固定定位
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本椿争。</p>
<p class="two">更多的文本怕膛。</p>
</body>
固定值或者百分數(shù)設(shè)置圖像的上邊緣
<head>
<style type="text/css">
img
{
position:absolute;
top:0px #5%
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>一些文本。一些文本秦踪。一些文本褐捻。一些文本。一些文本椅邓。一些文本柠逞。</p>
</body>
如何使用滾動條來顯示元素內(nèi)溢出的內(nèi)容
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>
<body>
<p>如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為景馁。</p>
<div>
這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理板壮。如果值為 scroll，不論是否需要合住，用戶代理都會提供一種滾動機制绰精。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條透葛。默認值是 visible笨使。如果其值overflow: hidden，則自動隱藏溢出的內(nèi)容获洲。若為auto阱表，則讓計算機自動處理溢出內(nèi)容。
</div>
</body>
設(shè)置元素的形狀clip
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 屬性剪切了一幅圖像：</p>
<p></p>
</body>
垂直排列圖象vertical-align
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
這是一幅位于段落中的圖像贡珊。
</p>
<p>
這是一幅位于段落中的圖像最爬。
</p>
</body>
