詳解內聯元素和塊元素

《CSS權威指南》中文中:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“ 行佈局”形式,這裏的“行佈局”的意思就是說其表現形式始終以行進行顯示。

    block元素的特點:
    1. 總是另起一行開始;
    2. 高度,行高以及頂、底邊距都可控制;
    3. 寬度缺省是它所在容器的100%,除非設定一個寬度。
 
    inline元素的特點:
    1. 和其它元素都在一行上;
    2. 高度,行高以及頂、底邊距不可改變;
    3. 寬度就是它所容納的文字或圖片的寬度,不可改變。

    說白了就是塊元素是以行爲單位,緊接它的下一個元素會另起一行,而在內聯元素後面的元素則不會另起一行。

    然後就是關於嵌套問題,塊元素裏可以嵌套內聯元素,而內聯元素卻並不能隨意嵌套塊元素。例如<p>天空晴朗<div>不溫不火</div>不睡懶覺<p>頁面會用三行來顯示,但這樣寫是錯誤的,W3C校驗也無法通過。哪些內聯元素不能嵌套塊元素?

    有一個區別標準挺好用,先把所有的塊元素再次劃分成幾個級別的,<html>在最外層,<html>下一級裏面有<head>、<body>、<frameset>、<noframes>,可視的元素只會出現在<body>裏,所以我們把<body>劃在第一個級裏面,接着,把不可以自由嵌套的元素劃在第三個級,其他的就歸進第二個級。所謂的不可自由嵌套的元素就是裏面只能放內聯元素的,它們包括有:標題標記的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落標記的<p>;分隔線<hr>和<dt>,只存在於<dl>的子一級。

    塊元素(block element) HTML標籤分類明細
    * address - 地址
    * blockquote - 塊引用
    * center - 舉中對齊塊
    * dir - 目錄列表
    * div - 常用塊級容易,也是css layout的主要標籤
    * dl - 定義列表
    * fieldset - form控制組
    * form - 交互表單 (只能用來容納其它塊元素)
    * h1 - 大標題
    * h2 - 副標題
    * h3 - 3級標題
    * h4 - 4級標題
    * h5 - 5級標題
    * h6 - 6級標題
    * hr - 水平分隔線
    * isindex - input prompt
    * menu - 菜單列表
    * noframes - frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容
    * noscript - 可選腳本內容(對於不支持script的瀏覽器顯示此內容)
    * ol - 排序表單
    * p - 段落
    * pre - 格式化文本
    * table - 表格
    * ul - 非排序列表


  內聯元素(inline element) 一般都是基於語義級(semantic)的基本元素,只能容納文本或者其它內聯元素。
  
 * 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 - 定義變量
 

  可變元素是基於以上兩者隨環境而變化的,它的基本概念就是根據上下文關係確定該元素是塊元素還是內聯元素。一旦確定了它的類別,它就遵循塊元素或者內聯元素的規則限制。
    
* applet - java applet  
    * button - 按鈕  
    * del - 刪除文本  
    * iframe - inline frame  
    * ins - 插入的文本  
    * map - 圖片區塊(map)  
    * object - object對象  
    * script - 客戶端腳本

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章