發新話題
打印

[知識文庫] display: inline-table|inline有什麼不同?

展開帖子列表 展開帖子列表

[知識文庫] display: inline-table|inline有什麼不同?

inline-table :  CSS2 將表格顯示為無前後換行的內聯對象或內聯容器
inline :  CSS1 內聯對象的默認值。用該值將從對象中刪除行

更多:

display     版本:CSS1/CSS2  兼容性:IE4+ NS4+ 繼承性:無

語法:

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

參數:

block :  CSS1 塊對象的默認值。用該值為對象之後添加新行
none :  CSS1 隱藏對象。與visibility屬性的hidden值不同,其不為被隱藏的對象保留其物理空間
inline :  CSS1 內聯對象的默認值。用該值將從對象中刪除行
compact :  CSS2 分配對象為塊對象或基於內容之上的內聯對象
marker :  CSS2 指定內容在容器對象之前或之後。要使用此參數,對象必須和:after及:before 偽元素一起使用
inline-table :  CSS2 將表格顯示為無前後換行的內聯對象或內聯容器
list-item :  CSS1 將塊對象指定為列表項目。並可以添加可選項目標誌
run-in :  CSS2 分配對象為塊對象或基於內容之上的內聯對象
table :  CSS2 將對象作為塊元素級的表格顯示
table-caption :  CSS2 將對象作為表格標題顯示
table-cell :  CSS2 將對象作為表格單元格顯示
table-column :  CSS2 將對象作為表格列顯示
table-column-group :  CSS2 將對象作為表格列組顯示
table-header-group :  CSS2 將對象作為表格標題組顯示
table-footer-group :  CSS2 將對象作為表格腳註組顯示
table-row :  CSS2 將對象作為表格行顯示
table-row-group :  CSS2 將對象作為表格行組顯示

說明:

設置或檢索對象是否及如何顯示。
目前 IE5.5僅支持以上CSS1的參數。
對應的腳本特性為display。請參閱我編寫的其他書目。

示例:
img { display: block; float: right; }
套一句黃小琥說過的話:「你可以點歌,但是我可以選歌」

TOP

display: none和visibility: hidden不同之處

http://www.qicaispace.com/teach/homepage/31.asp

處理HTML元素最關鍵的一個竅門,沒有任何特別的,就是理解他們是如何工作的。大部分頁面都可以使用一點點的標籤組合起來,你可以為每一個你選定的標籤樣式化。瀏覽器默認的可視化樣式元素由變化的字體樣式、邊界、補白和,和重要的,顯示類型。

最基本的顯示類型是內聯inline、塊block和清除none,他們分別可以用inline、block和none的值賦予display屬性來操作。

inline就如本身語義所明示的,顯示隨著行流動的元素。錨和強調元素都是傳統的內聯元素。

block使元素前後都有斷行。標題和段落元素都是傳統的塊元素的例子。

none,嗯,不顯示這個元素,聽起來毫無用處,但於易用性考慮(請看親和連接),改變樣式表,或者高級的翻轉效果都有很好的用途。

比如這個站點的默認原始版本,通過操縱一些傳統的內聯和塊元素來適應設計。

h1 { display: inline; font-size: 2em; } #header p { display: inline; font-size: 0.9em; padding-left: 2em; }
這使得「htmldog.com」的標題和標籤行可以並排,而不是一上一下,維護最優的易用性。

#navigation, #seeAlso, #comments, #standards { display: none; }
上述代碼使用在打印樣式中,用於「關閉」這些元素,比如,對於一個單一的頁面導航通常是不必須的。

注意
display: none和visibility: hidden不同之處在於display: none使元素完全是個死球,然而visibility: hidden雖不出現在內容中但保留著這個元素的流位置。比如,如果三段中的第二端設為display: none,第一段會直接到達第三段,而設為visibility: hidden的話,這個段落會有一個間隔。

表格
也許理解表格相關的顯示屬性值的最好方法是關心HTML表格。table是初始化的顯示,你可以用tr和td分別摹擬table-row和table-cell值。

display 屬性走得更遠,提供table-column、table-row-group、table-column-group、table-header- group、table-footer-group和table-caption的值,都是自描述的。這些值顯而易見的好處是,你可以用列來構造表格,代替有偏見的row。

最後,inline-table設置前後不斷行的表格。

注意
對CSS表格失去控制的話,可能嚴重的損害你網頁的親和力(易用性)。HTML應該用來傳達內容的,所以你有表格式數據的話,你應該用HTML表格來安排它們。使用CSS表格僅僅能給數據調調味,如果沒有CSS的話完全不可讀。十分不好。別走Michael Jackson的路。

其他顯示類型
list-item也是自描述的,一般以列表的形式顯示,使用在除li的HTML元素上。為了顯示正確,使用這個顯示類型的應該嵌套在ul或者ol元素內。

run-in使元素內聯或塊顯示,取決於其父元素的的顯示屬性。在IE和基於Mozilla的瀏覽器中都不能工作。

campact也使元素內聯或者塊顯示,同樣取決於上下文。它也不能很好工作。

marker僅僅是與:before和:after偽元素一起來定義content屬性的值。content屬性的自動值已經是marker,所以這只對覆蓋掉前面的content的顯示屬性有用。

TOP

發新話題