建体彩网|中彩网双色球连号|
?
快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

澳門新莆京app官網:實例詳解網頁制作中CSS元素的定位應用

?

1. position:static|無定位

position:static是所有元素定位的默認值, 一樣平常不用注明,除非有必要取消承襲的其余定位

example:

#div-1 {

position:static;

}

2. position:relative|相對定位

應用position:relative,就必要top,bottom,left,right4個屬性來共同,確定元素的位置。

假如要讓div-1層向下移動20px,左移40px:

example:

#div-1 {

position:relative;

top:20px;

left:40px;

}

假如用到相對定位,緊隨他的層divafter是不會呈現在div-1的下方,而是和div-1在同一個高度呈現。

可見, position:relative;并不是很好澳門新莆京app官網用。

3. position:absolute|絕對定位

應用position:absolute;,能夠很準確的將元素移動到你想要的位置,

讓我將 div-1a 移動到頁面的右上角:

example:

#div-1a {

position:absolute;

top:0;

right:0;

width:2澳門新莆京app官網00px;

}

應用絕對定位的div-1a層前面的或者后面的層會覺得這個層并不存在,絲絕不影響到他們。以是position:absolute;用于將一個澳門新莆京app官網元素放到固定的位置很好用,然則假如必要div-1a層相對付相近的層來確定位置就不要實現了。

*這里有個Win IE的bug必要提到,便是假如為絕對定位的元素定義一個相對的寬度,那么在IE下它的寬度取決于父元素的寬度而不是全部頁面的寬度。

4. position:relative + position:absolute|絕對定位+相對定位

假如給父元素(div-1)定義為position:relative;子元素(div-1a)定義為position:absolute,那么子元素(div-1a)的位置將相對付父元素(div-1),而不是全部頁面。

讓div-1a定位于div-1的右上角:

example:

this is div-1a element.

this is div-1 element.

#div-1 {

position:relative;

}

#div-1a {

position:absolute;

top:0;

right:澳門新莆京app官網0;

width:200px;

}

5. two column layout|兩列結構

讓我們實踐position:relative + position:absolute的理論,實現兩列結構。

example:

this is the column-one澳門新莆京app官網

this is the column-two

#div-1 {

position:relative;/*父元素相對定位*/

}

#div-1a {

position:absolute;/*子元素絕對定位*/

top:0;

right:0;

width:200px;

}

#div-1b {

position:absolute;/*子元素絕對定位*/

top:0;

left:0;

width:200px;

}

留意,在這個例子中會發明父元素的高度不會跟著子元素的高度變更,以是假如父元素的背景和邊框必要定義一個足夠高的高度才能顯示出來。

6.float|浮動對齊

應用float定位一個元素有float:left;&float:right;兩種值。這種定位只能在水平坐標定位,不能在垂直坐標定位。而且讓下面的元素浮動縈繞在它的左邊或者右邊。

example:

#div-1a {

float:left;

width:200px;

}

7.make two clumn with float|浮動實現兩列結構

假如讓一個元素float:left;另一個float:right;節制好他們的寬度,就能實現兩列的結構效果。

example:

#div-1a {

float:left;

width:150px;

}

#div-1b {

float:left;

width:150px;

}

8.clear float|清除浮動

假如你不想讓應用了float元素的下面的元素浮動縈繞在它的周圍,那么你就應用clear,clear有三個值,clear:left;(清除左浮動),clear:right;(清除右浮動),clear:both;(清除所有浮動)。

example:

this is div-1a

this is div-1b

this is div-1c

#div-1a {

float:left;

width:190px;

}

#div-1b {

float:left;

width:190px;

}

#div-1c {

clear:both;

}

至此,這個css的定位部分就停止了,你可以著手體會體會加深印象。

免責聲明:以上內容源自網絡,版權歸原作者所有,如有侵犯您的原創版權請告知,我們將盡快刪除相關內容。

您可能還會對下面的文章感興趣:

建体彩网
广东时时彩停止销售 牌九规则 云南时时彩开奖中心 欧泊彩票游戏 重庆快乐10分计划大全 河南快三 福彩辽宁快乐12开奖查 体彩青海11选5 体彩排列5开奖结果今天 英雄联盟人物