CSS常用屬性總結二

******* CSS 常用屬性 *********

【layout】

clear：該屬性的值指出了不允許有浮動物件的邊。

預設值：none

none： 允許兩邊都可以有浮動物件

both： 不允許有浮動物件

left： 不允許左邊有浮動物件

right： 不允許右邊有浮動物件

-----------------------------------------------------------

display：設定或檢索對象是否及如何顯示。

如果display設定為none，float及position屬性定義將不生效；

如果position既不是static也不是relative，float屬性定義將不生效；

IE7及更早瀏覽器只支援 none | inline | block | inline-block | list-item 屬性值；

Opera12.10及以上已支援直接寫屬性值：flex | inline-flex 而不用加首碼；

none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間

inline： 指定對象為內嵌元素。

block： 指定對象為塊元素。

list-item： 指定對象為清單項目。

inline-block： 指定對象為內聯塊元素。（CSS2）

table： 指定對象作為塊元素級的表格。類同於html標籤（CSS2）

inline-table： 指定對象作為內嵌元素級的表格。類同於html標籤

（CSS2）

table-caption： 指定對象作為表格標題。類同於html標籤

（CSS2）

table-row-group： 指定對象作為表格行組。類同於html標籤

（CSS2）

table-column： 指定對象作為表格列。類同於html標籤

（CSS2）

table-column-group： 指定對象作為表格列組顯示。類同於html標籤

（CSS2）

table-header-group： 指定對象作為表格標題組。類同於html標籤

（CSS2）

table-footer-group： 指定對象作為表格腳註組。類同於html標籤

（CSS2）

compact： 指派至為塊對象或基於內容之上的內聯對象（CSS3）

run-in： 根據上下文決定對象是內聯對象還是塊級對象。（CSS3）

如果run-in元素包含了一個區塊層級元素，run-in元素將變成區塊層級元素；

如果塊內有一個區塊層級元素（非float和position定義）緊跟run-in元素之後，run-in元素將變成塊內第一個內嵌元素；一個run-in元素不能插入開始已有run-in元素或者本身就是run-in元素的塊中；

其它情況下，run-in元素都將是一個區塊層級元素；

ruby： 將對象作為表格腳註組顯示（CSS3）

ruby-base： 將對象作為表格腳註組顯示（CSS3）

ruby-text： 將對象作為表格腳註組顯示（CSS3）

ruby-base-group： 將對象作為表格腳註組顯示（CSS3）

ruby-text-group： 將對象作為表格腳註組顯示（CSS3）

flex： 將對象作為彈性盒模型顯示（CSS3）

inline-flex： 將對象作為內聯塊級彈性盒模型顯示（CSS3）

-------------------------------------------------------------------

float： 該屬性的值指出了對象是否及如何浮動。

當該屬性不等於none引起對象浮動時，對象將被視作塊對象(block-level)，即display屬性等於block。也就是說，浮動物件的display特性將被忽略。

float在絕對位置和display為none時不會被應用。

none： 設定對象不浮動

left： 設定對象浮在左邊

right： 設定對象浮在右邊

--------------------------------------------------

overflow： 複合屬性。檢索或設定當對象的內容超過其指定高度及寬度時如何管理內容。

預設值：visible

如果只提供一個，其作用等同於overflow-x + overflow-y。

如果提供兩個，第一個等同於overflow-x，第二個等同於overflow-y。

對於table來說，假如table-layout屬性設定為fixed，則td對象支援帶有預設值為hidden的overflow屬性。如果設為hidden，scroll或者auto，那麼超出td尺寸的內容將被剪下。如果設為visible，將導致額外的文本溢出到右邊或左邊（視direction屬性設定而定）的儲存格。

visible： 不剪下內容。

hidden： 將超出對象尺寸的內容進行裁剪，將不出現捲軸。

scroll： 將超出對象尺寸的內容進行裁剪，並以捲軸的方式顯示超出的內容。

auto： 在需要時剪下內容並添加捲軸，此為body對象和textarea的預設值。

no-display： 當內容不適合當前內容盒子時，整個盒子將被移除，類似display:none。（CSS3）

no-content： 當內容不適合當前內容盒子時，整個內容被隱藏，類似visibility:hidden。（CSS3）

-------------------------------------------------------------------------------------------------

overflow-x：檢索或設定當對象的內容超過其指定寬度時如何管理內容。

預設值：visible

visible： 不剪下內容。

hidden： 將超出對象寬度的內容進行裁剪，將不出現捲軸。

scroll： 將超出對象寬度的內容進行裁剪，並以捲軸的方式顯示超出的內容。

auto： 在需要時剪下內容並添加捲軸，此為body對象和textarea的預設值。

no-display： 當內容不適合當前內容盒子時，整個盒子將被移除，類似display:none。

no-content： 當內容不適合當前內容盒子時，整個內容被隱藏，類似visibility:hidden。

---------------------------------------------------------------------------------------

overflow-y：索或設定當對象的內容超過其指定高度時如何管理內容。

預設值：visible

visible： 不剪下內容。

hidden： 將超出對象高度的內容進行裁剪，將不出現捲軸。

scroll： 將超出對象高度的內容進行裁剪，並以捲軸的方式顯示超出的內容。

auto： 在需要時剪下內容並添加捲軸，此為body對象和textarea的預設值。

no-display： 當內容不適合當前內容盒子時，整個盒子將被移除，類似display:none。

no-content： 當內容不適合當前內容盒子時，整個內容被隱藏，類似visibility:hidden。

----------------------------------------------------------------------------------------

rotation：檢索或設定對象的旋轉角度。

預設值：0

rotation旋轉以rotation-point設定的值作為參照原點進行旋轉位移。

元素的border、padding、內容以及任何沒有設定fixed的background都隨元素旋轉而旋轉。所有position取值為static和relative的子項目也會跟著旋轉，其餘的則不會。

rotation旋轉不影響父元素和兄弟元素，它們的位置布局不變。所以當元素旋轉時，可能會重疊到其它元素上。

該屬性類似transform屬性下的旋轉rotate()，可能會被替代或廢棄。

： 指定角度。可以為負值

-------------------------------------------------

rotation-point：檢索或設定的對象旋轉時所參照的座標點。

rotation旋轉以rotation-point設定的值作為參照原點進行旋轉位移。

該屬性類似transform-origin，可能會被替代或廢棄。

： 用百分比指定座標值。

： 用長度值指定座標值。

left： 指定原點的橫座標為left

center： 指定原點的橫座標或縱座標為center

right： 指定原點的橫座標為right

top： 指定原點的縱座標為top

bottom： 指定原點的縱座標為bottom

-------------------------------------------------------------------------

visibility：設定或檢索是否顯示對象。與display屬性不同，此屬性為隱藏的對象保留其佔據的物理空間

如果希望對象為可視，其父物件也必須是可視的。

預設值：visible

visible： 設定對象可視

hidden： 設定對象隱藏

collapse： 主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對於表格外的其他對象，其作用等同於hidden。IE6及以下不支援此參數值

---------------------------------------------------------------------------------------------------------------------------------

table-cell： 指定對象作為表格儲存格。類同於html標籤

（CSS2）

（CSS2）

table-row： 指定對象作為表格行。類同於html標籤

以上就是CSS常用屬性總結二的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

