首頁 > web前端 > css教學 > 主體

CSS常用屬性總結二

黄舟
發布: 2017-01-19 14:31:04
原創
1364 人瀏覽過

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

 

預設值:none

 

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

both: 左邊有浮動物件 

🠎le 右

 

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

 

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:指定原點的縱座標為top : 指定原點的縱座標為bottom 

 

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

 

visibility:設定或擷取是否顯示物件。與display屬性不同,此屬性為隱藏的物件保留其佔據的實體空間 

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

 

預設值:visible

 

visible: 設定物件視覺 

hidden: 設定物件隱藏 

collapse

hidden: 設定物件隱藏製作表

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

 

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

table-cell: 指定物件作為表格單元格。類別同於html標籤

(CSS2) 

(CSS2) 

table-row: 指定物件作為表格行。類別同於html標籤

   


以上就是CSS常用屬性總結二的內容,更多相關內容請關注PHPcn網(www.php.cn)!


相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!