第二天開始. 昨天學習了css的基本用法.包括css的引用和一些常用css屬性。掌握了css的基本用法，只是完成了css+div排版的第一步。說到排版，最重要的莫過於定位。我們用table來排版的時候是直接在網頁上畫出一個個格子，把內容填充到相應的格子裡去。用css也是這個原理，不過css不能直接劃格子，它有它自己的一套定位方法。今天的目標就是掌握css的定位。
首先，介紹兩個定義：相對定位和絕對位置。相對定位就是允許在文檔的原始位置上進行位移。而絕對位置則允許任意定位。下面是定位需要用到的幾個屬性：
因為定位不是一般的重要，所以這裡詳細介紹一下各個參數的作用：
position: static | absolute |relative
static : 無特殊定位，對象遵循HTML定位規則
absolute : 將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對位置。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框
//我們用絕對位置的時候一般都用這個屬性。
relative : 對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中位移位置
left： auto|lenth
auto : 無特殊定位，根據HTML定位規則載文檔流中分配
length : 由浮點數字和單位標識符組成的長度值 | 百分數。必須定義position屬性值為absolute或者relative此取值方可生效。
例：div { position: absolute; left： 1in; }
top和left的用法是一樣的，也要注意的是必須定義position屬性值為absolute或者relative此取值方可生效。
width：auto|lenth
auto : 無特殊定位，根據HTML定位規則載文檔流中分配
length : 由浮點數字和單位標識符組成的長度值 | 百分數。
height與width文法完全相同。而它不需要定義position必須為absolute
clip : auto | rect ( number number number number )
auto : 對象無剪下
rect ( number number number number ) : 依據上-右-下-左的順序提供自對象左上方為(0,0)座標計算的四個位移數值，其中任一數值都可用auto替換，即此邊不剪下
overflow : visible | auto | hidden | scroll
visible : 不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的大小。並且clip屬性設定將失效
//這個屬性的結果就像當與沒有div，內容有多少就顯示多少。
auto : 此為body對象和textarea的預設值。在需要時剪下內容並添加捲軸
hidden : 不顯示超過對象尺寸的內容
scroll : 總是顯示捲軸
z-index： auto | number
auto : 遵從其父物件的定位
number : 無單位的整數值。可為負數
//應該是用來產生一些立體效果滴
visibility： inherit | visible | collapse | hidden
inherit : 繼承上一個父物件的可見度
visible : 對象可視 hidden : 對象隱藏
collapse : 主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對於表格外的其他對象，其作用等同於hidden。IE5.5尚不支援此屬性。
以上屬性中的position,width,height,left,top,z-index是用來給div定位的，其中的clip，overflow，visibility則是用來控制對內容的顯示的，這些屬性可以看作一個層的基本屬性。掌握了層的基本屬性，我們就可以來看一個用層來定位並控制顯示的例子:
<html>
<head>
<title>dingwei css</title>
<style type=“text/css”>
<!--
#container1{position：absolute；top：100}
//*position：absolute；用定義container1 為絕對位置*//
#container2{position：absolute；top：100；visibility：hidden；}
//*定義container2為絕對位置，初始可見度為hidden（隱藏）*//
p{font-size：12pt；}//*定義p的字型*//
-->
</style>
</head>
<body>
<p style=“font-family:行書體；font-size:15pt；color:#cc33cc”>
請選擇一幅圖片： </p>//*設定字型大小、名稱、顏色*//
<div id=“container1”>
<dd><img src=“ss01065.jpg” width=“185”height=“280”>
//*匯入一張圖片，標識符為container1*//
<p style=“font-family:行書體；color:#cc9933；font-size:12pt”>
名稱：大漠</p>//*設定字型名稱、顏色、大小*//
</dd>
</div>
<div id=“container2”>
<dd><img src=“ss01095.jpg” width=“185”height=“280”>
//*匯入另一種圖片，標識符為container2*//
<p style=“font-family:行書體；color:#3366cc；font-size:12pt”>
名稱： 大海</p>
</dd>
</div>
<form name=“myform”>//*定義兩個按鈕*//
<p><input type=“button” value=“大漠”
onclick=“container1.style.visibility=‘visible’；
container2.style.visibility=‘hidden’”>
//*定義滑鼠點擊事件圖片1為可見，圖片2為不可見*//
<input type=“button” value=“大海”；
container1.style.visibility=‘hidden’；
onclick=“container2.style.visibility=‘visible’；
container1.style.visibility=‘hidden’”></p>
//*定義滑鼠點擊事件圖片1為不可見，圖片2為可見*//
</form>
</body>
</html>
button上用了一點js的技巧來控制css中的visibility值.
上面這個例子講的只是平面布局,駝駝以前的css知識也就到此為止,然而上面有個z-index的參數,是用來立體定位的,所以,div也可以是立體的,下面就來一個簡單的立體例子:
<html>
<head>
<title>zindex</title>
<style type=“text/css”>
<!--
.pile｛position:absolute；left:2in；top:2in；
width:3in；height:3in；｝//*定義了類pile，以及它的位置*//
.pile1{position:absolute；left:3in；top:2in；
width:1in；height:1in；} //*定義了類pile1，以及它的位置*//
-->
</style>
</head>
<body>
<img src=“ss01010.jpg” class=“pile” id=“image”
style=“z-index:1”>
//*匯入一張圖片，使它為pile類，z-index屬性定義為１，位置處於最下方
*//
<div class=“pile” id=“text1”
style=“color:#ffff33;z-index:2” > 這段文字將覆蓋在圖片上。
</div>//*定義一段文字的顏色和z-index屬性為2，處於中間位置*//
<img src=“075.gif” class=“pile1” id=“image”
style=“z-index:3”>
//*匯入第二張圖片，使它為“pile1”類，z-index屬性為3，位置處於最上
方*//
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
