區塊層級元素 Vs 內嵌元素，vs內嵌元素

區塊層級元素 Vs 內嵌元素，vs內嵌元素

HTML的元素可以分為兩種：

• 區塊層級元素（block level element ）
• 內嵌元素（inline element ）

二者的區別如下：

      1. 區塊層級元素獨佔一行（除非顯示修改元素的display屬性），內嵌元素在一行內顯示；

      2. 區塊層級元素可以設定width、height屬性，而內嵌元素設定這些屬性無效；

      3. 區塊層級元素的預設width為100%，而內嵌元素的的width是根據其內容或子項目確定的。 

 

二者的相互轉化：

      區塊層級元素——>內嵌元素：display:inline;    內嵌元素——>區塊層級元素：display:block;

 

介於二者之間的狀態：

      設定display:inline-block;屬性，使元素對外表現為行內元素，在一行內顯示；對內表現為區塊層級元素，能設定width、height屬性。 

 

常見的區塊層級元素和行內元素 

      區塊層級元素：div p h1 h2 h3 h4 h5 h6 dl ul ol li table hr（水平分割線）

      內嵌元素：a img span input（輸入框） select（項目選擇） textarea（多行文本輸入框） sub（下標） sup（上標）

CSS中內嵌元素與區塊層級元素的不同是什

區塊層級元素獨自站一行，有自己的空間範圍，內嵌元素不是。
 
CSS中內嵌元素與區塊層級元素的不同是什

區塊層級元素的分類區塊層級元素按照其應用於結構還是內容分為三種：結構化塊狀元素，終端塊狀元素，多目標塊狀元素。一.結構化塊狀元素這類元素用於構造文檔的結構，一個好的文檔結構對於搜尋引擎和應用其他技術（如JavaScript）都是十分有利的。它們沒有語義上的含義，僅僅劃分出了文檔的組織方式，並沒有體現文檔的內容。主要的結構化塊狀元素 <ol><ul><dl><table>支援結構化的元素 <li><dt><dd><caption><thead><tbody><tfoot><colgroup><col>二.終端塊狀元素這類元素用於從結構轉向內容，它們擁有語義上的含義，能夠表明內容的性質。終端塊狀元素屬於結構的終點，它們不能再包含其他區塊層級元素，只能包含文本或行級元素。終端塊狀元素 <h1>...<h6><p><blockquote><dt><address><caption>三.多目標塊狀元素所謂多目標指的是可以自由的擴充或嵌套文檔的結構，以可以終端的形式出現。當多目標塊狀元素以結構化的方式使用時就含有結構化的內涵，以終端的形式使用就含有語義的內涵。多目標塊狀元素既可以包含塊狀元素，也可以包含內容（文本與行級元素的組合為內容），但不能同時包含兩者。應該把內容放在塊狀元素中。塊狀元素不應作為行級元素與文本的兄弟元素，受HTML校正器的限制，目前還沒辦法檢驗出此種情況，但是應該避免。多目標塊狀元素 <div><li><dd><td><form><noscript>在談論CSS布局時，我們需要提前知道一些東西。對於html各種標籤/元素，可以從塊的層面做一個分類：要麼是block(塊元素)，要麼是inline(內嵌元素)： block元素的特點： 總是另起一行開始；高度，行高以及頂、底邊距都可控制；寬度預設是它所在容器的100%，除非設定一個寬度。 inline元素的特點： 和其它元素都在一行上；高度，行高以及頂、底邊距不可改變；寬度就是它所容納的文字或圖片的寬度，不可改變。 下面對它們的性質及應用做進一步說明：◎塊元素(block element) 通常作為其它元素的容器，它可以容納內嵌元素和其它塊元素。我們知道預設情況下，塊元素會順序以每次另起一行的方式往下排，而通過CSS控制其樣式，我們可以改變這種預設配置模式，把塊元素擺放到你想要的位置上 去。需要指出的是，table標籤也是塊元素的一種，基於table表格和基於CSS+DIV的布局，在使用者看來除了頁面載入速度的差別（table在 所有內容元素載入完成後才顯示），沒有其它的差別。但是從頁面的原始碼來看，這種差異就非常大了。基於良好結構理念設計的CSS布局源碼，至少能讓沒有 web開發經驗的使用者很容易找到連續的頁面內容。從這個角度來說，CSS layout code應該有更好的美學體驗。 塊元素(block element) HTML標籤分類明細 address - 地址blockquote - 區塊引述center - 舉中對齊塊dir - 目錄列表div - 常用塊級容易，也是css layout的主要標籤dl - 定義列表fieldset - form控制組form - 互動表單 （只能用來......餘下全文>>