div与span，id与class，block与inline，inline-block的区别！

div与span，id与class，block与inline，inline-block的区别！

   这次我们来学习几组CSS元素的区别！相信小伙伴们在使用的时候肯定有过这样的疑问吧？什么时候用id，什么时候用class？DIV，span到底咋回事的啊！扎心了，老铁！

第一组：DIV与SPAN

div与span的区别呢，博主已经在另外一片文章之中说过了！觉得他比较重要再来唠叨一次把233

   首先直观的感受二者都可以形成一定的区域，继而对这个区域进行操作，编辑各种属性等等！那么他们的区别在哪里呢？我们不妨借用下空间的概念，可以这样理解下。span的世界都是二纬的，是平面的，什么意思呢就是比如你写一大串span，比如你要在同一方向的平面内添加大量东西！这个时候就可以用SPAN 了，倘若采用DIV无疑会麻烦的多！他们都是在一个范围之内的，也就是可以互相碰触到！

   对于div就不同了div可以理解成三纬的空间的概念！不同的DIV是互相隔离的，是不通的！即使两个DIV相互紧挨着，他们之中的元素也是无法碰触在一起，简单的说就像是元气护罩一样！隔离开来！彼此都是独立的个体！博主这里用了非常多的div嵌套以及span去布局页面！

总结一下：top1--DIV是块元素，它可以包含任何块元素和行内元素！不会与其他元素位于同一行，span是行内元素，可以与其他的元素位于同一行！

                top2--DIV常用于页面中较大块结构的划分！之后配合CSS来操作！span呢，一般用来包含文字，符号等等！他没有结构的意义。就是纯碎的应用样式！

第二组：id与class：

首先 id和class是Html中两个最基本的公共属性！那么，他们究竟有什么区别呢？

1，对于id，首先id具有唯一性，也就是说在一个页面内，同样的id只能出现一次！这个超级好理解，就跟我们国家一样，每个人都只有一个身份证号！显而易见道理是一样的，倘若每个人都有两个或者两个以上身份证号，那岂不是乱套了？一般来说，对于页面之中比较大的结构或者关键部分，我们才使用id，关键部分比如：LOGO，导航，主体内容，底部信息栏等等！对于一些小的地方，使用class比较好！但是ID属性也不要轻易乱用，并且命名也十分关键！这次我们就不讨论这个了，以后在讨论233

2，class：对于class，相必我们都不会陌生！很多语言都有class！称之为“类”！比如从我们最早接触的C/c++!以及现在大火的python，还有万年老油条java都有class的影子。我们可以为任何元素设置相同或者不同的class，之后可以通过class来设置相应的css样式！如果你要给两个或者两个以上的元素定义相同的样式的话，还是使用class比较好，因为这样可以减少大量代码！

第三组：block与inline以及inline-block,

首先呢，block与inline以及inline-block都是display的属性之一！当然了display可不仅仅这三个属性，它还有table，table-rowtable-cell，none等元素！当然我们今天讨论的是前边三个！

1，block：block顾名思义，肯定就是块元素了！一般来说，他有以下几个特点：

（1）独自占有一行，排斥其他元素跟他位于同一行，包括块元素与行内元素；（2）块元素的内部可以容纳其他块元素或者行元素！（3）可以定义自己的width，height，也可以定义自己各方向的margin！

2，inline元素：首先，他是行内元素！特点如下：

（1）可以与其他行内元素位于同一行！（2）行内内部可以容纳其他元素，但是不可以容纳块元素！（3）不能定义width，height，margin-top，margin-bottom属性！但是可以定义margin-left，margin-right!

3，inline-block:

这是一个元素类型转换的属性，可以把元素转化为行内块状元素！小伙伴们在进行DIV布局的时候一定深有体会把hhh，具体操作如下：display：inline-block;行内块状元素的特点就是同时具备了块元素与行内元素的优点，既可以设置width，height，又可以与其他元素位于同一行了，不会发生排斥！是不是超级强大？233

好了，这次的分享就到这里咯！喜欢博主的点赞+评论哦，，，让博主知道自己不是在单机，真的有人再看唉！欢迎小伙伴们留言交流！干货不断，明天我们。不见不散哦！