普歌-赤道团队：元素的分类，特点及之间的相互转换

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;
        }

作者：刘港辉
本文源自：《 普歌-赤道团队：元素的分类，特点及之间的相互转换》
本文版权归作者所有，欢迎转载。
如果有不足，欢迎雅正留言