行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？

行内元素有哪些

行級元素是，在HTML文檔中可以一行顯示的元素，不會換行。

a（錨點元素）、b（粗體）、br（換行）、code、em（強調）、font（字型設定）、i（斜體）、img（圖檔）、input（輸入框）、span、strong（粗體強調）、textarea、u等；塊狀元素有：address（位址）、blockquote（塊引用）、center（居中對齊塊）、div、h1~h6（标題）、hr（水準分隔線）、p、ul、ol等。

塊級元素有哪些

塊級元素是會換行的。

三大清單和表格、六大标題和表單、段落位址要分塊

div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr

空（void）元素

空元素就是沒有内容的 HTML 元素,是在開始标簽中就關閉的元素。

通俗點來講空元素就是能不成對出現的标簽

br、hr、col、area、base、img、input、link、source等等

元素之間的轉換

通過給div添加display:inline條件，可以讓塊級元素變為行級元素，如果添加display:inline-block,那就是變成行内塊元素。

inline與inline-block的差別是，後者多了一個block屬性，具有塊級元素的寬和高的特性。

塊級元素中可以設定 width、height、padding、margin 等屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: inline;
        }
    </style>
</head>
<body>
    <span>極客李華</span>
    <div>
        李華
    </div>
</body>
</html>

運作結果

從結果上看，可以發現兩個元素的内容到了同一行。

行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？inline與inline-block的差別行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？

總結

行内元素的屬性為：display:inline ===>不獨占一行，并且不可以設定寬高

塊級元素的屬性為：display:block ===> 獨占一行，并且可以設定寬高

行内塊元素的屬性為：display:inline-block ===> 不獨占一行，可以設定寬高

行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？inline與inline-block的差別行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？

行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？