新聞中心
上節(jié)我們介紹了部分DIV布局屬性,這一節(jié)接著向大家介紹,首先看一下絕對位置屬性,絕對位置屬性有四個屬性:top、right、bottom和left,屬性值為長度單位或百分?jǐn)?shù)。

專業(yè)從事做網(wǎng)站、成都做網(wǎng)站,高端網(wǎng)站制作設(shè)計,微信小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團隊竭力真誠服務(wù),采用H5開發(fā)+CSS3前端渲染技術(shù),響應(yīng)式網(wǎng)站,讓網(wǎng)站在手機、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組,與您實時在線互動,隨時提供解決方案,暢聊想法和感受。
DIV絕對位置屬性:
絕對位置屬性有四個屬性:top、right、bottom和left,屬性值為長度單位或百分?jǐn)?shù):
◆屬性名稱:'top'、'right'、'bottom'、'left'
屬性值:
初始值:none
適合對象:所有元素
是否繼承:no
百分比備注:被禁止
利用以上屬性,用戶就可以精確定義元素的位置,如:
- Iusedtworedhyphenstoserveasachangebar.They
- will"float"totheleftofthelinecontainingTHIS
- color:red;">--
- word.
◆DIV布局之z-index屬性:
在CSS中允許元素的重疊顯示,這樣就有一個顯示順序的問題,z-index屬性描述了元素的前后位置,如果把電腦屏幕看作X-Y平面的話,那么Z軸就是垂直于屏幕的,z-index使用整數(shù)表示元素的前后位置,數(shù)值越大,就會顯示在相對靠前的位置,并且CSS同意在z-index中使用負(fù)數(shù)。
屬性名稱:'z-index'
屬性值:auto
初始值:auto
適合對象:使用position屬性的元素
是否繼承:no
百分比備注:被禁止
◆DIV布局之width屬性:
規(guī)定BOX的width屬性,可以使BOX的寬度不依靠它所包含的內(nèi)容的多少:
屬性名稱:'width'
屬性值:
初始值:auto
適合對象:塊元素
是否繼承:no
百分比備注:根據(jù)父元素的width而定
◆在CSS中還提供了min-width和max-width屬性,使得BOX的寬度在最小寬度和***寬度之間。
屬性名稱:'min-width'
屬性值:
初始值:0
適合對象:all
是否繼承:no
百分比備注:根據(jù)父元素的width而定
屬性名稱:'max-width'
屬性值:
初始值:100%
適合對象:all
是否繼承:no
百分比備注:根據(jù)父元素的width而定#p#
◆DIV布局之height屬性:
相同的BOX還有height屬性來控制本身的高度:
屬性名稱:'height'
屬性值:
初始值:auto
適合對象:塊元素
是否繼承:no
百分比備注:根據(jù)父元素的height而定
◆在CSS中還提供了min-height和max-height屬性,使得BOX的高度在最小高度和***高度之間。
屬性名稱:'min-height'
屬性值:
初始值:0
適合對象:all
是否繼承:no
百分比備注:根據(jù)父元素的height而定
屬性名稱:'max-height'
屬性值:
初始值:100%
適合對象:all
是否繼承:no
百分比備注:根據(jù)父元素的height而定
◆DIV布局之overflow屬性:
在規(guī)定元素的寬度和高度時,如果元素的面積不足以顯示全部內(nèi)容的話就要用到overflow屬性:
屬性名稱:'overflow'
屬性值:visiblehiddenscrollauto
初始值:visible
適合對象:元素的position屬性
是否繼承:no
百分比備注:被禁止
屬性值含義如下:
visible:擴大面積以顯示所有內(nèi)容。
hidden:隱藏超出范圍的內(nèi)容。
scroll:在元素的右邊顯示一個滾動條。
auto:當(dāng)內(nèi)容超出元素面積時,顯示滾動條。
◆DIV布局之clip屬性:
CSS還提供了一種clip屬性,可以把元素區(qū)域剪切成各種形狀,但目前提供的只有方形一種:
屬性名稱:'clip'
屬性值:
初始值:auto
適合元素:元素的position屬性被設(shè)為absolute
是否繼承:no
百分比備注:被禁止
◆DIV布局之line-height和vertical-align屬性:
line-height屬性可以規(guī)定元素內(nèi)部的行間距,使用長度單位或百分?jǐn)?shù):
屬性名稱:'line-height'
屬性值:normal
初始值:normal
適合對象:所有元素
是否繼承:yes
百分比備注:根據(jù)元素的字體大小而定
例如下面的例子,雖然表達方式不同,但結(jié)果一樣:
- DIV{line-height:1.2;font-size:10pt}
- DIV{line-height:1.2em;font-size:10pt}
- DIV{line-height:120%;font-size:10pt}
◆DIV布局之vertical-align屬性決定元素在垂直位置的顯示:
屬性名稱:'vertical-align'
屬性值:baselinesubsupertoptext-topmiddlebottomtext-bottom
初始值:baseline
適合對象:inlineelements
適合繼承:no
百分比備注:根據(jù)元素的line-height屬性而定
屬性值含義如下:
baseline:與元素的基線對齊。
middle:與元素中部對齊。
sub:字下沉。
super:字上升。
text-top:文本頂部對齊。
text-bottom:文本底部對齊。
Top:和本行位置***元素對齊。
Bottom:和本行位置***元素對齊。
◆DIV布局之Visibility屬性:
該屬性用于控制元素的顯示或隱藏:
屬性名稱:'visibility'
屬性值:inheritvisiblehidden
初始值:inherit
適合對象:所有元素
是否繼承:如果該值為inherit,則繼承父元素屬性
百分比備注:被禁止
分享題目:DIV布局屬性用法詳盡解讀
鏈接分享:http://www.fisionsoft.com.cn/article/cojoooi.html


咨詢
建站咨詢
