div+css屬性各個屬性詳解7

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

布局屬性

在以前的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屬性決定元素在垂直位置的顯示：

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

Visibility屬性:

該屬性用於控制元素的顯示或隱藏：

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More