DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 行內元素與塊級函數的三個區別
行內元素與塊級函數的三個區別
編輯:CSS特效代碼     

引言

       一次偶然的面試遇到的題目,雖然當時知道塊級元素和行內元素的區別,但是沒有仔細去想。

一、行內元素與塊級元素

 

塊級元素列表 <address> 定義地址 <caption> 定義表格標題 <dd> 定義列表中定義條目 <div> 定義文檔中的分區或節 <dl> 定義列表 <dt> 定義列表中的項目 <fieldset> 定義一個框架集 <form> 創建 HTML 表單 <h1> 定義最大的標題 <h2> 定義副標題 <h3> 定義標題 <h4> 定義標題 <h5> 定義標題 <h6> 定義最小的標題 <hr> 創建一條水平線 <legend> 元素為 fieldset 元素定義標題 <li> 標簽定義列表項目 <noframes> 為那些不支持框架的浏覽器顯示文本,於 frameset 元素內部 <noscript> 定義在腳本未被執行時的替代內容 <ol> 定義有序列表 <ul> 定義無序列表 <p> 標簽定義段落 <pre> 定義預格式化的文本 <table> 標簽定義 HTML 表格 <tbody> 標簽表格主體(正文) <td> 表格中的標准單元格 <tfoot> 定義表格的頁腳(腳注或表注) <th> 定義表頭單元格 <thead> 標簽定義表格的表頭 <tr> 定義表格中的行

 

行內元素列表 <a> 標簽可定義錨 <abbr> 表示一個縮寫形式 <acronym> 定義只取首字母縮寫 <b> 字體加粗 <bdo> 可覆蓋默認的文本方向 <big> 大號字體加粗 <br> 換行 <cite> 引用進行定義 <code> 定義計算機代碼文本 <dfn> 定義一個定義項目 <em> 定義為強調的內容 <i> 斜體文本效果 <img> 向網頁中嵌入一幅圖像 <input> 輸入框 <kbd> 定義鍵盤文本 <label> 標簽為 input 元素定義標注(標記) <q> 定義短的引用 <samp> 定義樣本文本 <select> 創建單選或多選菜單 <small> 呈現小號字體效果 <span> 組合文檔中的行內元素 <strong> 語氣更強的強調的內容 <sub> 定義下標文本 <sup> 定義上標文本 <textarea> 多行的文本輸入控件 <tt> 打字機或者等寬的文本效果 <var> 定義變量

 

可變元素素列表--可變元素為根據上下文語境決定該元素為塊元素或者內聯元素 <button> 按鈕 <del> 定義文檔中已被刪除的文本 <iframe> 創建包含另外一個文檔的內聯框架(即行內框架) <ins> 標簽定義已經被插入文檔中的文本 <map> 客戶端圖像映射(即熱區) <object> object對象 <script> 客戶端腳本
二、行內元素與塊級函數的三個區別

 

1.行內元素與塊級元素直觀上的區別

    行內元素會在一條直線上排列,都是同一行的,水平方向排列

    塊級元素各占據一行,垂直方向排列。塊級元素從新行開始結束接著一個斷行。

2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。

3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上

行內元素設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效


三、行內元素轉換為塊級元素

        display:block (字面意思表現形式設為塊級)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved