免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
CSS屬性篇(八):布局屬性

在以前的HTML里,元素的位置只能*元素的依次排列覺得,而在CSS里你可以更精確的定位元素。Netscape曾提出過Layer標記,它對于精確布局很有好處,但是并沒有被W3C承認,W3CCSS提出了類似于Layer標記的功能。

 

position屬性:

position屬性用來決定元素的位置類型,詳見屬性:

屬性名稱: 'position'
屬性值: absolute | relative | static
初始值: static
適合對象: 所有元素
是否繼承: no
百分比備注: 被禁止
其屬性值分別代表:
absolute:屏幕上的絕對位置。
relative:屏幕上的相對位置。
static:固有位置。


direction屬性:

direction屬性決定BOX的排列方向,詳見屬性:

屬性名稱: 'direction'
屬性值: ltr| rtl
初始值: ltr
適合對象: 所有元素
是否繼承: yes
百分比備注: 被禁止


floatclear屬性:

HTML中圖片可以選擇飄浮的位置,現(xiàn)在BOX對象通過CSS對于也可以選擇飄浮的位置。改變BOXfloat屬性,BOX將飄浮在其他元素的左或右方:

屬性名稱: 'float'
屬性值: left| right|none
初始值: none
適合對象: 所有元素
是否繼承: no
百分比備注: 被禁止

例如:

<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>

相反的,使用clear屬性將禁止元素在BOX的左方或右方飄?。?/span>

屬性名稱: 'clear'
屬性值: left| right|both|none
初始值: none
適合對象: 所有元素
是否繼承: no
百分比備注: 被禁止


絕對位置屬性:

絕對位置屬性有四個屬性:topright、bottomleft,屬性值為長度單位或百分數(shù):

屬性名稱: 'top'、'right'、'bottom'、'left'
屬性值: <length>|<percentage>|auto
初始值: none
適合對象: 所有元素
是否繼承: no
百分比備注: 被禁止

利用以上屬性,用戶就可以精確定義元素的位置,如:

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>

z-index屬性:

CSS中允許元素的重疊顯示,這樣就有一個顯示順序的問題,z-index屬性描述了元素的前后位置,如果把電腦屏幕看作X-Y平面的話,那么Z軸就是垂直于屏幕的,z-index使用整數(shù)表示元素的前后位置,數(shù)值越大,就會顯示在相對*前的位置,并且CSS同意在z-index中使用負數(shù)。

屬性名稱: 'z-index'
屬性值: auto|<integer>
初始值: auto
適合對象: 使用position屬性的元素
是否繼承: no
百分比備注: 被禁止


width屬性:

規(guī)定BOXwidth屬性,可以使BOX的寬度不依*它所包含的內(nèi)容的多少:

屬性名稱: 'width'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的width而定

CSS中還提供了min-widthmax-width屬性,使得BOX的寬度在最小寬度和最大寬度之間。

屬性名稱: 'min-width'
屬性值: <length> | <percentage>
初始值: 0
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的width而定

屬性名稱: 'max-width'
屬性值: <length> | <percentage>
初始值: 100%
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的width而定

height屬性:

相同的BOX還有height屬性來控制本身的高度:

屬性名稱: 'height'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的height而定

CSS中還提供了min-heightmax-height屬性,使得BOX的高度在最小高度和最大高度之間。

屬性名稱: 'min-height'
屬性值: <length> | <percentage>
初始值: 0
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的height而定

屬性名稱: 'max-height'
屬性值: <length> | <percentage>
初始值: 100%
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的height而定


overflow屬性:

在規(guī)定元素的寬度和高度時,如果元素的面積不足以顯示全部內(nèi)容的話就要用到overflow屬性:

屬性名稱: 'overflow'
屬性值: visible | hidden | scroll | auto
初始值: visible
適合對象: 元素的position屬性
是否繼承: no
百分比備注: 被禁止

屬性值含義如下:

visible:擴大面積以顯示所有內(nèi)容。
hidden:隱藏超出范圍的內(nèi)容。
scroll:在元素的右邊顯示一個滾動條。
auto:當(dāng)內(nèi)容超出元素面積時,顯示滾動條。

clip屬性:

CSS還提供了一種clip屬性,可以把元素區(qū)域剪切成各種形狀,但目前提供的只有方形一種:

屬性名稱: 'clip'
屬性值: <shape> | auto
初始值: auto
適合元素: 元素的position屬性被設(shè)為absolute
是否繼承: no
百分比備注: 被禁止

<shape>值為rect(top right bottom left)

line-heightvertical-align屬性:

line-height屬性可以規(guī)定元素內(nèi)部的行間距,使用長度單位或百分數(shù):

屬性名稱: 'line-height'
屬性值: normal | <number> | <length> | <percentage>
初始值: 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 }

vertical-align屬性決定元素在垂直位置的顯示:

屬性名稱: 'vertical-align'
屬性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
初始值: baseline
適合對象: inline elements
適合繼承: no
百分比備注: 根據(jù)元素的line-height屬性而定

屬性值含義如下:
baseline:與元素的基線對齊。
middle:與元素中部對齊。
sub:字下沉。
super:字上升。
text-top:文本頂部對齊。
text-bottom:文本底部對齊。
Top:和本行位置最高元素對齊。
Bottom:和本行位置最低元素對齊。

Visibility屬性:

該屬性用于控制元素的顯示或隱藏:

屬性名稱: 'visibility'
屬性值: inherit | visible | hidden
初始值: inherit
適合對象: 所有元素
是否繼承: 如果該值為inherit,則繼承父元素屬性
百分比備注: 被禁止


本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
css屬性列表和屬性值含義
CSS line
WordPress中設(shè)置框架元素iframe自適應(yīng)寬度和高度
css中的block / inline 屬性
[分享]CSS全攻略
表格標記詳解★表格邊框css修飾語法
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服