学习前端之标签分类

学习前端之标签分类

HTML中的标签有那么多，如何简单有快捷的记住他们呢？标签虽然多，常用的就那么几个，只要把他们分类，就好记多啦。

块级元素	行级元素	行内块元素
div,p,h1-h6,form,ulli,olli,address,table	span,a,伪元素,strong,del,em	img

三者有什么区别呢？废话不多说，直接上代码。

<div class = "box">我是第一个div</div>
<div class = "box2">我是第二个div</div>
<span class = "s1">我是第一个span</span>
<span class = "s2">我是第二个span</span>

*{
  	margin:0;
    padding:0;
}
div{
    width:100px;
    height:100px;
}
div.box{
    background:red;
}
div.box2{
    background:blue;
}
span{
    width:100px;
    height:100px;
}
span.s1{
    background:green;
}
span.s2{
    background:pink;
}

效果如下：

可以发现，我们给span标签设置了宽高，却没有设成功，而div标签设置成功了，这是块级元素与行级元素的区别之一：

块级元素可以设置宽高，行级元素不能设置宽高，行级元素的宽高是其内容撑起的

除此之外，我们可以发现，div独占了一行，并自动换行，正如其名字块级元素一样，这是区别之二：

块级元素独占一行，自动换行

任何标签都有外边距（margin）和内边距（padding），那两者在margin和padding方面又有什么区别呢？

div{
    width:100px;
    height:100px;
    margin:10px 30px;
    padding:15px 25px;
}
div.box{
    background:red;
}
div.box2{
    background:blue;
}
span{
    width:100px;
    height:100px;
    margin: 50px 50px;
    padding:20px 25px;
}
span.s1{
    background:green;
}
span.s2{
    background:pink;
}

对于div,margin和padding上下左右都是有效的，而span标签，虽然padding的上下有在变化，但并没有像div那样，把其他元素顶出去，它只是自己的宽高在变，这种不能被算作有效,这是块级元素与行级元素的区别三：

块级元素支持margin和padding，行级元素margin和padding只有左右有效，上下无效

两者最后一个区别是

块级元素可以添加任意内容（除h标签和p标签），行级元素只能添加行级元素（除a标签）

这点和之后的就自己下去试试吧，自己动手，丰衣足食！

以上都是块级元素和行级元素的区别，那行级块元素呢？

行级块元素就是块级元素和行级元素的结合体，它具有的特点：

不会独占一行，不会自动换行，可以添加高度和宽度，可以添加任意内容，支持margin和padding

最后，是最最最重要的点 三者的转换

转化成块级元素	display : block
转化成行级级元素	display : inline
转化成行级块元素	display : inline-block

别小看他们哦，这三个可以起很大作用的，转化为对应的元素，就具有其的特点了，比如，我们想要让上面的span标签可以设置宽高，只需要添加display : block,就可以实现啦，自己下去试试吧！！！