處理HTML元素最關鍵的一個竅門
沒有任何特別的
就是理解他們是如何工作的
大部分頁面都可以使用一點點的標簽組合起來
你可以為每一個你選定的標簽樣式化
浏覽器默認的可視化樣式元素由變化的字體樣式
邊界
補白和
和重要的
顯示類型
最基本的顯示類型是內聯inline
塊block和清除none
他們分別可以用inline
block和none的值賦予display屬性來操作
inline就如本身語義所明示的
顯示隨著行流動的元素
錨和強調元素都是傳統的內聯元素
block使元素前後都有斷行
標題和段落元素都是傳統的塊元素的例子
none
嗯
不顯示這個元素
聽起來毫無用處
但於易用性考慮（請看親和連接）
改變樣式表
或者高級的翻轉效果都有很好的用途
比如這個站點的默認原始版本
通過操縱一些傳統的內聯和塊元素來適應設計
h
{
display: inline;
font
size:
em;
}
#header p {
display: inline;
font
size:
em;
padding
left:
em;
}
這使得“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的顯示屬性有用
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20205.html
