html塊元素和內聯元素:
對於html各種標簽/元素,可以從塊的層面做一個分類:要么是block(塊元素),要么是inline(內聯元素)。
block元素的特點:
總是另起一行開始;
高度,行高以及頂、底邊距都可控制;
寬度缺省是它所在容器的100%,除非設定一個寬度。
inline元素的特點:
和其它元素都在一行上;
高度,行高以及頂、底邊距不可改變;
寬度就是它所容納的文字或圖片的寬度,不可改變。
塊元素(block element) HTML標簽分類明細
address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易,也是css layout的主要標簽
dl - 定義列表
fieldset - form控制組
form - 交互表單 (只能用來容納其它塊元素)
h1-h6 - 標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容(對於不支持script的瀏覽器顯示此內容)
ol - 排序表單
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
內聯元素(inline element) HTML標簽分類明細
a - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
bdo - bidi override
big - 大字體
br - 換行
cite - 引用
code - 計算機代碼(在引用源碼的時候需要)
dfn - 定義字段
em - 強調
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標簽
q - 短引用
s - 中划線(不推薦)
samp - 定義范例計算機代碼
select - 項目選擇
small - 小字體文本
span - 常用內聯容器,定義文本內區塊
strike - 中划線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下划線
var - 定義變量
◎可變元素是基於以上兩者隨環境而變化的,它的基本概念就是根據上下文關系確定該元素是塊元素還是內聯元素。一旦確定了它的類別,它就遵循塊元素或者內聯元素的規則限制。
可變元素 HTML標簽分類明細
applet - java applet
button - 按鈕
del - 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊(map)
object - object對象
script - 客戶端腳本
但是通過CSS,我們可以擺脫上面表格里HTML標簽歸類的限制,自由地在不同標簽/元素上應用我們需要的屬性。
css display應用:
定義和用法
display 屬性規定元素應該生成的框的類型。
對於XML,由於XML 沒有內置的這種層次結構,所有display是絕對必要的。
默認值:inline
繼承性:no
版本:CSS1
JavaScript 語法:object.style.display="inline"
所有主流瀏覽器都支持 display 屬性。
可選的值
none 此元素不會被顯示。
block 此元素將顯示為塊級元素,此元素前后會帶有換行符。
inline 默認。此元素會被顯示為內聯元素,元素前后沒有換行符。
inherit 規定應該從父元素繼承 display 屬性的值。
……