css教程:CSS定位屬性的應(yīng)用_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
The CSS positioning properties allows you to position an element.
使用CSS定位屬性可以讓你定義元素的位置
如何讓一元素相對(duì)于原始位置進(jìn)行相對(duì)定位 Position:relative
This example demonstrates how to position an element relative to its normal position.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
如何使用絕對(duì)值來(lái)定位元素 Position:absolute
This example demonstrates how to position an element using an absolute value.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
何如設(shè)置元素的外形,并以這個(gè)外形顯示 Set the shape of an element
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
Overflow
當(dāng)元素的內(nèi)容超過(guò)了指定的范圍,overflow屬性就可以指定應(yīng)該以怎樣的形式來(lái)處理
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
如何垂直對(duì)齊一張圖片 Vertical align an image
This example demonstrates how to vertical align an image in a text.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
Z-index
Z-index可以讓一元素放到另一元素的"后面"
Z-index can be used to place an element "behind" another element.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
Z-index
上面例子中的元素現(xiàn)在Z-index值已經(jīng)發(fā)生的變化
The elements in the example above have now changed their Z-index.
Examples 實(shí)例:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
CSS定位屬性答應(yīng)你指定元素上下左右的位置。也答應(yīng)你設(shè)置元素的外形,將元素安置在另一個(gè)元素的后面,并指定當(dāng)元素內(nèi)容超出范圍后應(yīng)該怎么做。
使用CSS定位屬性可以讓你定義元素的位置
如何讓一元素相對(duì)于原始位置進(jìn)行相對(duì)定位 Position:relative
This example demonstrates how to position an element relative to its normal position.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
如何使用絕對(duì)值來(lái)定位元素 Position:absolute
This example demonstrates how to position an element using an absolute value.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
何如設(shè)置元素的外形,并以這個(gè)外形顯示 Set the shape of an element
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
Overflow
當(dāng)元素的內(nèi)容超過(guò)了指定的范圍,overflow屬性就可以指定應(yīng)該以怎樣的形式來(lái)處理
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
如何垂直對(duì)齊一張圖片 Vertical align an image
This example demonstrates how to vertical align an image in a text.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
Z-index
Z-index可以讓一元素放到另一元素的"后面"
Z-index can be used to place an element "behind" another element.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
Z-index
上面例子中的元素現(xiàn)在Z-index值已經(jīng)發(fā)生的變化
The elements in the example above have now changed their Z-index.
Examples 實(shí)例:
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
CSS定位屬性答應(yīng)你指定元素上下左右的位置。也答應(yīng)你設(shè)置元素的外形,將元素安置在另一個(gè)元素的后面,并指定當(dāng)元素內(nèi)容超出范圍后應(yīng)該怎么做。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- 淺析HTML與javascript中常用編碼
- xthml的基礎(chǔ)問(wèn)答
- 清除網(wǎng)頁(yè)文字水印的兩種簡(jiǎn)單方法
- HTML表格標(biāo)記教程(23):行的暗邊框色屬性BORDERCOLORDARK
- XHTML入門(mén)學(xué)習(xí)教程:什么是XHTML?
- HTML表格標(biāo)記教程(9):單元格間距屬性CELLSPACING
- CSS文件或Web頁(yè)面中度量單位介紹及比較
- HTML表單標(biāo)記教程(3):輸入標(biāo)記
- XHTML入門(mén)學(xué)習(xí)教程:簡(jiǎn)單網(wǎng)頁(yè)制作
- XHTML教程:針對(duì)初學(xué)者的XHTML基礎(chǔ)
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-css教程:CSS定位屬性的應(yīng)用
。