九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
HTML DIV CSS布局基礎(chǔ)
一、HTML基本語法
HTML類似XML，頁面上的每個(gè)節(jié)點(diǎn)用一對標(biāo)簽表示，例如

  源代碼 [ HTML ]

<P>這是段落P>
標(biāo)簽的開始標(biāo)記與結(jié)束標(biāo)記都是放在一對尖括號中，不同的是結(jié)束標(biāo)記多一個(gè)正斜杠（/） -
不要與反斜杠（\）弄混淆，實(shí)際上除了windows的路徑分隔符、轉(zhuǎn)義字符串里的轉(zhuǎn)義符 - 其他地方基本都是使用正斜杠（例如：網(wǎng)址、網(wǎng)頁中的路徑分隔符、或者表示除法、分隔命令行參數(shù)，以及HTML標(biāo)簽結(jié)束標(biāo)記等等）。
HTML的一些常用標(biāo)簽請查看手冊：
http://bbs.aau.cn/doc/html/dhtml/objects.html

表示表示圖片的 表示換行的
則沒有結(jié)束標(biāo)記 - 這種叫空標(biāo)簽，在XML里空標(biāo)簽必須要補(bǔ)一個(gè)斜杠，但HTML里沒有這規(guī)定，所以HTML比較隨意沒有XML那樣嚴(yán)格的規(guī)范，也正因?yàn)槿绱?，有了接近XML的XHTML1.0 規(guī)范，這個(gè)XHTML當(dāng)年曾經(jīng)很火甚至有人斷言HTML5不會(huì)出生，但是后來越搞越復(fù)雜到不向下兼容的XHTML2.0終于被HTML5擊敗（HTML5向下兼容HTML4.0, XHTML1.0).

HTML標(biāo)簽的開始標(biāo)記內(nèi)部還可以使用一個(gè)或多個(gè)鍵值對表示節(jié)點(diǎn)的屬性，例如:

  源代碼 [ HTML ]

<img src="圖片路徑" width="100" height="100">
HTML 屬性名可以使用除空白字符,雙引號,單引號,'/','>','\0'以外的所有可打印字符，HTML 的屬性值可選包含在一對雙引號、或單引號內(nèi),注意不要使用有歧義的表示即可，例如值包含單引號就應(yīng)當(dāng)放在一對雙引號內(nèi)。所以類似下面這樣的寫法雖不常見但仍然是合法的：

  源代碼 [ HTML ]

<div ${test}=123>測試div>
HTML中標(biāo)簽名、屬性名、屬性值都是忽略大小寫的，但因?yàn)闉g覽器眾多實(shí)現(xiàn)上有細(xì)節(jié)的差異，為保持良好的兼容性，應(yīng)當(dāng)都使用小寫。

二、HTML標(biāo)準(zhǔn)規(guī)范、DOCTYPE

說到HTML標(biāo)準(zhǔn)，實(shí)際上目前兼容性最好的還是HTML4.0以及XHTML1.0,
編寫一個(gè)網(wǎng)頁使用什么樣的標(biāo)準(zhǔn) 一般 在HTML的第一行使用 聲明，這個(gè)語句比較復(fù)雜，例如HTML4.0兼容標(biāo)準(zhǔn)的聲明為

  源代碼 [ HTML ]

注意開始的尖括號后面有一個(gè)感嘆號 - 表示這是一個(gè)聲明語句而不是普通節(jié)點(diǎn)，
而緊接在DOCTYPE后的HTML表示文檔的根節(jié)點(diǎn)是HTML, 后面是指明使用什么規(guī)范。

如果不想搞太復(fù)雜，可以寫一個(gè)最簡單的DOCTYPE聲明（ 完全不寫會(huì)導(dǎo)致IE以IE5的怪異模式顯示網(wǎng)頁 ）：

  源代碼 [ HTML ]

現(xiàn)在很多編輯器（例如notepad++)支持 zencoding或emmet，可以比較快的生成一個(gè)簡單的包含DOCTYPE的HTML代碼，幾個(gè)常用的縮寫如下：
html:4s 嚴(yán)格的HTML4.0
html:4t 兼容性的HTML4.0(就是要求不那么嚴(yán)格）
html:xt 使用XHMTL1.0標(biāo)準(zhǔn)




三、HTML文檔

一個(gè)完整的的HTML頁面源碼如下：


一個(gè)標(biāo)準(zhǔn)的HTML頁面包含幾個(gè)必要的標(biāo)記
為其他節(jié)點(diǎn)的根節(jié)點(diǎn)，而 html一般 包含兩個(gè)子節(jié)點(diǎn), body節(jié)點(diǎn)里面放顯示內(nèi)容，而head節(jié)點(diǎn)里放頁面的其他參數(shù)（例如窗口標(biāo)題，頁面編碼等等）


而head節(jié)點(diǎn)與body節(jié)點(diǎn)又可以包含其他的子節(jié)點(diǎn)，子節(jié)點(diǎn)又可以包含子節(jié)點(diǎn)，就象一棵樹：


html是樹干是根節(jié)點(diǎn)，而head節(jié)點(diǎn)包含的內(nèi)容總是默默無聞的不可見部份，
body則包含所有顯示在頁面上的內(nèi)容。

四、盒子模型

所有的節(jié)點(diǎn)都可以用CSS來定義外觀，CSS可以寫到節(jié)點(diǎn)的style屬性里，也可以寫到CSS文件里。
所有可顯示的節(jié)點(diǎn)的顯示模式都可以用盒子模型來表示，如下圖：


每一個(gè)盒子有內(nèi)容區(qū)，有邊框（CSS的border屬性）
邊框里面是內(nèi)邊距（ 或者叫內(nèi)補(bǔ)白、即CSS的padding屬性）
邊框外面則是外邊距（或者叫外邊界，即CSS的margin屬性）
當(dāng)然還有節(jié)點(diǎn)的寬度、高度等等，有有的瀏覽器中寬度高度整的是包含border的節(jié)點(diǎn)大小，而在有的瀏覽器中指的是內(nèi)容區(qū)大小，關(guān)于盒子模型請參考文章：了解CSS 盒子模型

五、CSS選擇器

如果你還不知道什么是CSS選擇器，請參考教程 CSS選擇器語法詳解  以及 HTMLayout快速入門

六、塊節(jié)點(diǎn)、內(nèi)聯(lián)節(jié)點(diǎn)

HTML是以流的模式來顯示節(jié)點(diǎn)的，所有節(jié)點(diǎn)分為兩類。

塊節(jié)點(diǎn)：可以指定高度、寬度（當(dāng)然也支持上面所說的盒子模型的所有屬性,例如內(nèi)邊距、外邊距等等），多個(gè)塊節(jié)點(diǎn)總是在頁面上自上向下的垂直流動(dòng)（塊節(jié)點(diǎn)總是獨(dú)占一行，默認(rèn)的兩個(gè)塊節(jié)點(diǎn)不會(huì)顯示在同一行內(nèi)，無法在同一行內(nèi)聯(lián)接）

內(nèi)聯(lián)節(jié)點(diǎn)：內(nèi)聯(lián)節(jié)點(diǎn)總是在頁面上自左向右的水平流動(dòng)，一行放不下來才會(huì)流動(dòng)到下一行，內(nèi)聯(lián)元素顯示在行內(nèi)，其高度受限于行距的高度，一個(gè)典型的例子就是文本，內(nèi)聯(lián)節(jié)點(diǎn)不能指定垂直方向的外邊距（但是可以指定水平方向的外邊距）、雖然也可以指定邊框以及內(nèi)邊距（但在垂直方向上受行距高度的限制，邊框以及內(nèi)邊距在垂直方向上設(shè)置的再大也不能改變行距高度，多余的內(nèi)邊距會(huì)被忽略，而多余的邊框會(huì)溢出到上一行或下一行重疊顯示），內(nèi)聯(lián)節(jié)點(diǎn)也不能指定高度（受行距高度的限制），也不能指定寬度（即內(nèi)聯(lián)節(jié)點(diǎn)在水平方向上只有外邊距是正常起作用的，垂直方向上內(nèi)外邊距、邊框等都顯示不正常受制于行距高度）

塊節(jié)點(diǎn)通常用來布局、建立網(wǎng)頁的框架、調(diào)整網(wǎng)頁的結(jié)構(gòu)，最重要的塊節(jié)點(diǎn)就是div節(jié)點(diǎn)。
內(nèi)聯(lián)節(jié)點(diǎn)通常用來顯示內(nèi)容(文本和圖像）、最常見的內(nèi)聯(lián)節(jié)點(diǎn)是span，注意顯示圖像的img也是內(nèi)聯(lián)節(jié)點(diǎn)。

在嚴(yán)格的HTML4規(guī)范中，body下面只能包含塊節(jié)點(diǎn)，所有內(nèi)聯(lián)節(jié)點(diǎn)都應(yīng)當(dāng)放到塊節(jié)點(diǎn)中。
所以div如此重要，甚至HTML布局可以簡稱 div+css 布局。

塊節(jié)點(diǎn)中的兄弟節(jié)點(diǎn)默認(rèn)是自上向下流動(dòng)的，我們來看一個(gè)例子：

  源代碼 [ AAuto ]

001import win.ui;
002/*DSG{{*/
003var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流動(dòng)的塊節(jié)點(diǎn)" )
004winform.add(  )
005/*}}*/
006 
007import web.form;
008var wb = web.form( winform  );
009 
010wb.html = /**
011<html>
012<head>
013    <title>Document</title>
014    <style type="text/css">
015        div#header {
016            border:red 1px solid;
017            background:#cccccc;
018            margin-bottom:20px;
019        }
020        div#main-box{
021            border:blue 1px solid;
022            margin-top:20px;
023            padding:10px;
024        }
025         
026        div#main-box div{
027            border:green 1px solid;
028            width:100%;
029            height:100px;
030            overflow:hidden;//IE6下要加上這句
031        }
032         
033        div#main-box div#a{
034            width:200px;
035            height:150px;
036        }
037    </style>
038</head>
039<body>
040    <div id="header"> 這是標(biāo)題 </div>
041    <div id="main-box">
042        <div id="a" >a </div>
043        <div id="b" >b </div>
044        <div id="c" >c </div>
045        <div id="d" >d</div>
046    </div>
047</body>
048</html>   
049**/
050  
051winform.show();  
052win.loopMessage();
運(yùn)行上面的代碼，你會(huì)看到這樣的顯示效果：



紅色邊框的 #header 節(jié)點(diǎn)在上面，
藍(lán)色邊框的 #main-box 節(jié)點(diǎn)在下面，
他們自上向下流動(dòng)，注意上下兩個(gè)塊節(jié)點(diǎn)之間的上下外邊距會(huì)自動(dòng)合并，#header 節(jié)點(diǎn)的下邊距是20像素，#main-box的上邊距是10像素，那他們之間的邊距不是總和的30像素，而是重疊后的最大邊距20像素。

#a,#b,#c,#d 四個(gè)綠色邊框的兄弟節(jié)點(diǎn)也是自上向下流動(dòng)的，不論他們是多大的寬度，始終占據(jù)獨(dú)立的一行。

塊節(jié)點(diǎn)如果在CSS的float屬性中指定浮動(dòng)屬性，
那么他會(huì)脫離默認(rèn)的垂直向下的顯示流，向左或向右橫向浮動(dòng)（這樣就可以水平布局塊節(jié)點(diǎn)了）

我們把a(bǔ)節(jié)點(diǎn)向右浮動(dòng)看看效果，也就是在CSS代碼中加上：

  源代碼 [ CSS ]

div#a{  float:right; }
完整源碼如下：

  源代碼 [ AAuto ]

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="自上向下流動(dòng)的塊節(jié)點(diǎn)" )
winform.add(  )
/*}}*/
 
import web.form;
var wb = web.form( winform  );
 
wb.html = /**
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        div#header {
            border:red 1px solid;
            background:#cccccc;
            margin-bottom:20px;
        }
        div#main-box{
            border:blue 1px solid;
            margin-top:20px;
            padding:10px;
        }
         
        div#main-box div{
            border:green 1px solid;
            width:100%;
            height:100px;
            overflow:hidden;//IE6下要加上這句
        }
         
        div#main-box div#a{
            width:200px;
            height:150px;
            float:right;
        }
    </style>
</head>
<body>
    <div id="header"> 這是標(biāo)題 </div>
    <div id="main-box">
        <div id="a" >a </div>
        <div id="b" >b </div>
        <div id="c" >c </div>
        <div id="d" >d</div>
    </div>
</body>
</html>   
**/
  
winform.show();  
win.loopMessage();
運(yùn)行后的效果如下：


注意上圖中的 #a 節(jié)點(diǎn)漂移到了頁面的右側(cè)，他脫離了原來的文檔流，
而他后面的其他節(jié)點(diǎn)就完全當(dāng)他不存在，繼續(xù)自管自的從下向下流動(dòng)，在一些瀏覽器中 #b #c 會(huì)顯示在#a的后面，也就是 #a不但是浮動(dòng)到了右側(cè)也浮動(dòng)到了他們的上面（ 這時(shí)候可以通過指定左側(cè)塊節(jié)點(diǎn)的右邊距 - 也就是 margin-right 避免重疊 ）

注意 #a雖然是浮動(dòng)的節(jié)點(diǎn)，但是他不會(huì)影響他前面的節(jié)點(diǎn)、以及他的父親節(jié)點(diǎn)（這就象孫悟空逃不出如來佛的手掌心 ），
而對于他后面的節(jié)點(diǎn)，他無視他們的存在，

如果你希望 #c節(jié)點(diǎn)在 #a節(jié)點(diǎn)的下面，那么就要在 #c的CSS屬性中加上 clear:right 清除右浮動(dòng)，也就是不允許任何節(jié)點(diǎn)浮動(dòng)到他的右側(cè)，在上面的代碼里加下下面的CSS代碼：

  源代碼 [ CSS ]

div#c{
    clear:right;/*不允許其他節(jié)點(diǎn)浮動(dòng)到他右邊*/
}
修改以后運(yùn)行網(wǎng)頁，顯示效果如下：


其他清除浮動(dòng)的方法：

也可以在浮動(dòng)節(jié)點(diǎn)的父節(jié)點(diǎn)CSS中應(yīng)用 diaplay:inline-block; 或設(shè)置 overflow（值為visible以外的值,IE6必須觸發(fā)haslayout才能生效），position:absolute,float 等使父節(jié)點(diǎn)產(chǎn)生獨(dú)立的包裹性以清除子節(jié)點(diǎn)的浮動(dòng)影響。

內(nèi)聯(lián)節(jié)點(diǎn)默認(rèn)是自左向右水平流動(dòng)的，看一個(gè)示例代碼：

  源代碼 [ AAuto ]

001import win.ui;
002/*DSG{{*/
003var winform = ..win.form( bottom=555;scroll=1;right=511;text="自左向右流動(dòng)的內(nèi)聯(lián)節(jié)點(diǎn)" )
004winform.add(  )
005/*}}*/
006 
007import web.form;
008var wb = web.form( winform  );
009 
010wb.html = /**
011<!doctype html>
012<html>
013<head>
014    <title>Document</title>
015    <style type="text/css">
016        div#header {
017            border:red 1px solid;
018            background:#cccccc;
019            margin-bottom:20px;
020        }
021        div#main-box{
022            border:blue 1px solid;
023            margin-top:20px;
024            padding:10px;
025        }
026         
027        div#main-box span{
028            border:green 1px solid;
029            width:50px;
030            height:50px;
031        }
032         
033        span#a{
034            width:50px;
035            height:150px;  
036        } 
037    </style>
038</head>
039<body>
040    <div id="header"> 這是標(biāo)題 </div>
041    <div id="main-box">
042        <span id="a" >a </span>
043        <span id="b" >b </span>
044        <span id="c" >c </span>
045        <span id="d" >d</span>
046    </div>
047</body>
048</html>   
049**/
050  
051winform.show();  
052win.loopMessage();
顯示效果如下：


可以看到，內(nèi)聯(lián)節(jié)點(diǎn) #a,#b #c #d 都是span，自左向右流動(dòng)。
內(nèi)聯(lián)節(jié)點(diǎn)默認(rèn)的是不能指定高度的（在IE6怪異模式下可以指定寬度），這稱為內(nèi)聯(lián)塊節(jié)點(diǎn)( display: inline-block )

內(nèi)聯(lián)節(jié)點(diǎn)也可以指定邊框邊距這些 - 如果是純粹的inline（內(nèi)聯(lián)）節(jié)點(diǎn)垂直方向上高度有關(guān)的外觀屬性會(huì)受制于行距高度，而inline-block（內(nèi)聯(lián)塊） 可以不受行距高度限制，而且內(nèi)聯(lián)節(jié)點(diǎn)也可以向左或向右浮動(dòng)，常見的如文本環(huán)繞圖片的效果就是使用浮動(dòng)屬性實(shí)現(xiàn)，示例如下：

  源代碼 [ AAuto ]

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="向各浮動(dòng)的內(nèi)聯(lián)節(jié)點(diǎn)" )
winform.add(  )
/*}}*/
 
import web.form;
var wb = web.form( winform  );
 
wb.html = /**
<!doctype html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        div#header{
            /*rgb函數(shù)用于表示顏色,參數(shù)可以是百分比或0到255之間的數(shù)值*/
            background:rgb(255,122,122);
        }
        div#main-box{
            /*藍(lán)色可以用 #0000FF表示,也可以用 rgb(0,0,255)表示,或簡寫為blue*/
            border:blue 1px solid;
            margin-top:20px;
            padding:10px;
            width:300px;
        }
         
        div#main-box img{
            float:right;
        }
    </style>
</head>
<body>
    <div id="header"> 這是標(biāo)題 </div>
    <div id="main-box">
        <img src="http://bbs.aau.cn/static/image/common/logo.png" >
         AAuto雖然小，但是支持的接口很豐富，可支持標(biāo)準(zhǔn)DLL的 stdcall，cdecl，thiscall，fastcall，regparm(n)  等調(diào)用約定，可以支持C++導(dǎo)出的類對象，可以支持com靜態(tài)動(dòng)態(tài)雙接口，象VBS一樣原生支持com對象?？焓质蔷G色軟件,下載包不到7MB，不需要安裝解壓縮即可直接使用,雙擊打開下載的壓縮包
    </div>
</body>
</html>   
**/
  
winform.show();  
win.loopMessage();
顯示效果如下：


可以看到 img 節(jié)點(diǎn)通過在CSS里指定 float:right; 向右浮動(dòng)，然后本該水平流動(dòng)的文本環(huán)繞在他周圍。

CSS屬性里批定 position:static，將按默認(rèn)的文檔流定位節(jié)點(diǎn)，
也就是前面幾節(jié)講的塊節(jié)點(diǎn)自上向下流，而內(nèi)聯(lián)節(jié)點(diǎn)自左向右流動(dòng)。
所以這是節(jié)點(diǎn)的默認(rèn)position屬性（ 不指點(diǎn)position屬性他的值默認(rèn)就是 static ）

看一個(gè)簡單的源碼。

  源代碼 [ AAuto ]

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="按默認(rèn)文檔流定位( position:static )" )
winform.add(  )
/*}}*/
 
import web.form;
var wb = web.form( winform  );
 
wb.html = /**
<html>
<head> 
    <style type="text/css">
        div#main-box{
            border:blue 1px solid;
            margin-top:20px;
            padding:10px;
            width:300px;
        }
         
        div#main-box div{
            border:green 1px solid;
            width:100%;
            height:100px;
        }
          
    </style>
</head>
<body> 
    <div id="main-box">
        <div id="a" >a </div>
        <div id="b" >b </div>
        <div id="c" >c </div>
        <div id="d" >d</div>
    </div>
</body>
</html>   
**/
  
winform.show();  
win.loopMessage();
塊節(jié)點(diǎn)自左上角開始，自上向下流動(dòng)，顯示效果如下：


如果在節(jié)點(diǎn)的CSS屬性中指定 position:absolute; 則節(jié)點(diǎn)會(huì)脫離默認(rèn)的文檔流并使用絕對坐標(biāo)定位。
絕對坐標(biāo)指的是：left指定左坐標(biāo),top指定頂坐標(biāo),right指定右坐標(biāo),bottom指定底坐標(biāo)，如果僅指定right,top屬性則是相對于最近的一個(gè)position為relative或absolute的父元素進(jìn)行定位（默認(rèn)為 body 節(jié)點(diǎn)，也就是相對于頁面左上角定位）。

使用前面一節(jié)的示例代碼，我們?yōu)?div#main-box 節(jié)點(diǎn)加上下面的CSS:

  源代碼 [ CSS ]

div#main-box {
  position:absolute;/*使用絕對定位*/
  right:120px;/*右坐標(biāo)為120像素*/
  top:50px;/*頂坐標(biāo)為50像素*/
}
修改后的完整源碼如下：

  源代碼 [ AAuto ]

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="絕對定位( position:absolute )" )
winform.add(  )
/*}}*/
 
import web.form;
var wb = web.form( winform  );
 
wb.html = /**
<html>
<head> 
    <style type="text/css">
        div#main-box{
            border:blue 1px solid;
            margin-top:20px;
            padding:10px;
            width:300px;
             
            position:absolute;/*使用絕對定位*/
            right:120px;/*右坐標(biāo)為120像素*/
            top:50px;/*頂坐標(biāo)為50像素*/
        }
         
        div#main-box div{
            border:green 1px solid;
            width:100%;
            height:100px;
        }
          
    </style>
</head>
<body> 
    <div id="main-box">
        <div id="a" >a </div>
        <div id="b" >b </div>
        <div id="c" >c </div>
        <div id="d" >d</div>
    </div>
</body>
</html>   
**/
  
winform.show();  
win.loopMessage();
顯示效果如下：


注意absolute并不一定是相對body的左上角定位，他會(huì)向上查找最近的一個(gè)position為relative或absolute的父元素作為坐標(biāo)參考點(diǎn)。請運(yùn)行下面的示例代碼：

  源代碼 [ AAuto ]

import win.ui;
/*DSG{{*/
winform = win.form(text="position定位測試";right=599;bottom=399;)
/*}}*/
 
import web.layout;
wbLayout = web.layout(winform);
  
wbLayout.html =/***
<div id="a" style = "position:relative;margin:50px;border:1px red solid;width:300px;height:300px;" >
    <div id="b" style = "position:absolute;left:40px;top:80px;border:1px blue solid;width:100px;height:100px;" >絕對定位</div>
</div>
***/
 
winform.show()
win.loopMessage();
運(yùn)行后的效果如下：

注意看  藍(lán)色邊框的#b 節(jié)點(diǎn)是相對紅色邊框 #a節(jié)點(diǎn)定位（ #a節(jié)點(diǎn)的樣式中定義了 position:relative ），并非是相對body節(jié)點(diǎn)。如果去掉 #a節(jié)點(diǎn)樣式中的 position:relative 結(jié)果就不一樣了。代碼如下：

  源代碼 [ HTML ]

<div id="a" style = "margin:50px;border:1px red solid;width:300px;height:300px;" >
    <div id="b" style = "position:absolute;left:40px;top:80px;border:1px blue solid;width:100px;height:100px;" >絕對定位</div>
</div>
這時(shí)候#b節(jié)點(diǎn)就是相對body定位，運(yùn)行后的效果如下：


position:absolute 還帶來一個(gè)好處，使用 absolute定位的節(jié)點(diǎn)在樣式中也可以使用 z-index 調(diào)整節(jié)點(diǎn)在Z軸上的順序（ 也就是節(jié)點(diǎn)的前后重疊順序、或者叫Z序 ）， 而 psition:static 的節(jié)點(diǎn)不支持 z-index。

節(jié)點(diǎn)的CSS屬性里指定 position:relative 則使用相對定位，
相對定位與絕對坐標(biāo)類似，可以使用 left,top,bottom,right 等指定坐標(biāo)，不同的是節(jié)點(diǎn)并不會(huì)脫離原來的文檔流，坐標(biāo)只是相對他原來應(yīng)當(dāng)顯示的位置。

注意，所謂相對坐標(biāo) - 不是指相對于他父節(jié)點(diǎn)的坐標(biāo)值。
一個(gè)節(jié)點(diǎn)在標(biāo)準(zhǔn)的文檔流中，他默認(rèn)應(yīng)當(dāng)顯示在哪個(gè)位置 - 這就是相對坐標(biāo)的參考值。

請看下面的示例：

  源代碼 [ AAuto ]

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=555;scroll=1;right=511;text="相對定位( position:relative )" )
winform.add(  )
/*}}*/
 
import web.form;
var wb = web.form( winform  );
 
wb.html = /**
<html>
<head> 
    <style type="text/css">
        div#main-box{
            border:blue 1px solid;
            margin-top:20px;
            padding:10px;
            width:300px;
        }
         
        div#main-box div{
            border:green 1px solid;
            width:100%;
            height:100px;
             
            position:relative ;/*使用相對定位*/
            right:20px;/*相對于自己原來的位置偏移20像素*/
            top:50px;/*相對于自己原來的位置偏移50像素*/
        }
          
    </style>
</head>
<body> 
    <div id="main-box">
        <div id="a" >a </div>
        <div id="b" >b </div>
        <div id="c" >c </div>
        <div id="d" >d</div>
    </div>
</body>
</html>   
**/
  
winform.show();  
win.loopMessage();
運(yùn)行代碼后網(wǎng)頁顯示效果如下：



節(jié)點(diǎn)首先按標(biāo)準(zhǔn)的文檔流移動(dòng)到他本應(yīng)該顯示的位置，然后再相對移動(dòng)指定的坐標(biāo)值。
相對坐標(biāo)并不是相對父節(jié)點(diǎn)的坐標(biāo)，而是相對他自己原來位置的坐標(biāo) - 這是容易混淆的一個(gè)地方。

如果需要相對父節(jié)點(diǎn)的進(jìn)行絕對定位，那就要象上一節(jié)所講的，首先把父節(jié)點(diǎn)的樣式加上 position:relative; 然后把自己的樣式加上 position:absolute;
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
HTML CSS實(shí)現(xiàn)淘寶首頁
css 寬度(CSS width)
CSS的position屬性完全解析
關(guān)于html5不支持frameset的解決方法
web CSS3 實(shí)現(xiàn)3D旋轉(zhuǎn)木馬
純html加css的鍵盤UI效果圖
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服