瞭解HTML 元素分類，HTML元素分類

瞭解HTML 元素分類，HTML元素分類

　　HTML中包含大量的標籤, 這些標籤在我們使用中發現會有小小的差別, 有的標籤用了之後不會有太大的布局變化, 只是語義化, 而有的標籤卻會重起一行, 相當於自己斷行符號了一次, 這就是不同標籤元素的分類不同造成的結果.

　　區塊層級元素

　　在HTML中, <div>, <p>, <h1>, <form>, <ul>, <ol>, <li>等標籤就是區塊層級元素, 每個區塊層級元素一般都具有相同的特點.

　　1, 每個區塊層級元素都從新的一行開始, 並且其後的元素也另起一行. (也就是區塊層級元素就要自己佔一行, 後面的也得讓路)

　　2, 元素的高度, 寬度, 行高以及頂和底邊距都可設定.

　　3, 元素寬度在不設定的情況下, 是它本身父容器的100%, 也可以單獨進行的設定.

　　內嵌元素

　　區別於塊狀元素, <span>, <a>, <label>, <strong>, <em>就是典型的內聯標籤(行內元素)元素, 大家在使用過程中其實在布局上面是沒太大的變化的, 它們修改的只是行內的一些視覺或者點擊效果等等.

　　當然, 內嵌元素也有自己的一些特點, 這些和區塊層級元素都是一一對應的.

　　1, 內嵌元素和其他元素都是在一行上, 而不會排擠其他的元素, 

　　2, 元素的高度, 寬度以及頂部底部邊距不可設定(因為元素都是行內緊挨著, 你如果設定這些, 那麼元素不就都亂了).

　　3, 元素的寬度就是它包含的文字或圖片的寬度, 不可改變.

　　內聯塊狀元素

　　這種元素非常少, 它們同時具備兩種元素的特點, <img>, <input>這兩個標籤就是內聯塊狀元素. 就不多做介紹了.

　　

　　這三種元素是可以互相轉化的, 也就是說可以通過css強制修改其元素類型, 只需要設定display的屬性即可, 假如想要將內嵌元素<span>類型修改為區塊層級元素, 代碼如下

　　span{

　　　　display:block;

　　}

　　同理其他的也是一樣的屬性值不同而已, 修改為區塊層級元素:block, 修改為內嵌元素:inline, 修改為內聯塊狀元素:inline-block.

　　這三種元素一定要非常準確的掌握, 因為在div + css布局中, 它們佔了舉足輕重的地位.