gembin

          OSGi, Eclipse Equinox, ECF, Virgo, Gemini, Apache Felix, Karaf, Aires, Camel, Eclipse RCP

          HBase, Hadoop, ZooKeeper, Cassandra

          Flex4, AS3, Swiz framework, GraniteDS, BlazeDS etc.

          There is nothing that software can't fix. Unfortunately, there is also nothing that software can't completely fuck up. That gap is called talent.

          About Me

           

          CSS中的網頁布局的屬性

          布局(Layout)屬性:

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

          position屬性:

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

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

          direction屬性:

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

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

          float和clear屬性:

          在HTML中圖片可以選擇飄浮的位置,現在BOX對象通過CSS對于也可以選擇飄浮的位置。改變BOX的float屬性,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的左方或右方飄浮:

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

          絕對位置屬性:

          絕對位置屬性有四個屬性:top、right、bottom和left,屬性值為長度單位或百分數:

          屬性名稱: ’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使用整數表示元素的前后位置,數值越大,就會顯示在相對靠前的位置,并且CSS同意在z-index中使用負數。

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

          width屬性:

          規定BOX的width屬性,可以使BOX的寬度不依靠它所包含的內容的多少:

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

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

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

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

          height屬性:

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

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

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

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

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

          overflow屬性:

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

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

          屬性值含義如下:

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

          clip屬性:

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

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

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

          line-height和vertical-align屬性:

          line-height屬性可以規定元素內部的行間距,使用長度單位或百分數:

          屬性名稱: ’line-height’
          屬性值: normal | <number> | <length> | <percentage>
          初始值: normal
          適合對象: 所有元素
          是否繼承: yes
          百分比備注:根據元素的字體大小而定

          例如下面的例子,雖然表達方式不同,但結果一樣:

          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
          百分比備注: 根據元素的line-height屬性而定

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

          Visibility屬性:

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

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

          posted on 2008-03-26 10:21 gembin 閱讀(359) 評論(0)  編輯  收藏 所屬分類: CSS

          導航

          統計

          常用鏈接

          留言簿(6)

          隨筆分類(440)

          隨筆檔案(378)

          文章檔案(6)

          新聞檔案(1)

          相冊

          收藏夾(9)

          Adobe

          Android

          AS3

          Blog-Links

          Build

          Design Pattern

          Eclipse

          Favorite Links

          Flickr

          Game Dev

          HBase

          Identity Management

          IT resources

          JEE

          Language

          OpenID

          OSGi

          SOA

          Version Control

          最新隨筆

          搜索

          積分與排名

          最新評論

          閱讀排行榜

          評論排行榜

          free counters
          主站蜘蛛池模板: 林甸县| 阳泉市| 扎兰屯市| 平武县| 赤水市| 逊克县| 通化市| 什邡市| 昆山市| 平利县| 湾仔区| 赣州市| 武威市| 嘉荫县| 花垣县| 六枝特区| 孙吴县| 遂宁市| 修文县| 清镇市| 毕节市| 东兴市| 西峡县| 斗六市| 莫力| 尉犁县| 白山市| 阿图什市| 丰台区| 雅安市| 白河县| 河源市| 肃宁县| 江孜县| 遂溪县| 荃湾区| 凤台县| 绥中县| 万安县| 绥德县| 蛟河市|