技術標籤：Htmlhtmlcssblock

html中有許多標籤/元素，每個都有各自的用途，今天我來做個分類，幫助自己鞏固一下

1.元素的分類及特點：

（1）：塊級元素(block)：

bod , h1~h6 , ul , ol , li , div , table , form , p , hr,
address , blockquote , center , dir , dl , fieldset , isindex , menu , noframes , noscript , pre ,

特點：（a）：塊級元素（block）前後都產生換行，所以塊級元素總是獨佔一行，比較霸道，塊狀元素會按順序自上而下排列。

（b）：塊狀元素預設沒有自己高度和寬度,預設情況下它的寬度是繼承其父元素的寬度，因此可以設定寬和高。

（2）：內聯元素(inline 或稱行內元素)：

a , span , strong , select , img , input , i , br , em , abbr , acronym , b , bdo , big , cite , code , dfn , font , kbd , label , q , s , samp , small , strike , sub , sup

特點：（a）：與其他元素一行顯示
（b）：不能手動設定寬和高,具體根據內容而言
（c）：不能設定上下margin值，可以設定左右margin值

（3）：內聯塊元素(inline-block 或稱可變元素，行內塊元素)：

applet ,button ,del ,iframe , ins ,map ,object , script
特點：（a）：可以與其他元素一行顯示
（b）：也可以設定大小

相互轉換：

行內—>塊：display: block;

        a {
            display: block;
            margin: 20px 100px;
            background-color: skyblue;
        }

塊—>行內：display: inline;

        div {
            display: inline;
        }

行內/塊—>行內塊：display: inline-blcok;

        div {
            display: inline-blcok;
        }

作者：劉港輝
本文源自：《 普歌-赤道團隊：元素的分類，特點及之間的相互轉換》
本文版權歸作者所有，歡迎轉載。
如果有不足，歡迎雅正留言